Want to change the label behavior

[prackode]

I am using stockChart, where in the valueLegend there is label which changes the color on the basis of the hover candle . If the hovered candle is green then green color else red.

I don't want this.

I want to customize that label such that :

• It shows, whether the plotted product is Live trading or not.
• So if its live then show the label to green.
• Else to red.
• It won't change on the basis of the hover or anything. Until and less I set the value.

Talking about this label :

Below the function I am using :

  currentMarketState(state : boolean){
    if(state){
      this.chartInstance.valueLegend.markers.template.setAll({
        // fill the color to green
      })
    }else {
      this.chartInstance.valueLegend.markers.template.setAll({
        // fill the color to red
      })
    }
  }

[martynasma]

That doesn't look like a default legend. Would you be able to share your chart code? Preferably something runable, like on CodePen.

[prackode]

Using default valueLegend only :

/ Add a stock legend
// -------------------------------------------------------------------------------
// https://www.amcharts.com/docs/v5/charts/stock/stock-legend/
var valueLegend = mainPanel.plotContainer.children.push(am5stock.StockLegend.new(root, {
  stockChart: stockChart
}));

valueLegend.markers.template.setAll({
  width : 5,
  height:5,
})

// Will create a function to change the fill/stroke dynamacilly on the basis of the product live trading state.
// something like this 
  currentMarketState(state : boolean){
    if(state){
      this.chartInstance.valueLegend.markers.template.setAll({
        // fill the color to green
      })
    }else {
      this.chartInstance.valueLegend.markers.template.setAll({
        // fill the color to red
      })
    }
  }

My question is :

• How can I stop the current default behavior. Of changing the marker color on the basis of the candle hover.
• And Give the fixed color on the marker which I can set. @martynasma

[martynasma]

You can achieve it via adapters on marker rectangle template:

valueLegend.markerRectangles.template.adapters.add("fill", function() {
  return am5.color(0x0000ff)
});

valueLegend.markerRectangles.template.adapters.add("stroke", function() {
  return am5.color(0x0000ff)
});

[workingbuddy10]

@martynasma Something similar we are trying to achieve. But its not working.

For example in the below codepen, when I click on the RED button. Then the label should be changed to RED only, it shouldn't dependent on the cursor hover of the candles. Similar for the green.

We are using the that marker as a signal/indicator whether the product is LIVE or NOT. Irrespective of the default behavior, we don't want the default behavior.

https://codepen.io/Ansh-m-the-reactor/pen/ZEPrbrb?editors=1011

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.