stockchart label issue

[prackode]

I have created a label to show the price in the stockchart, but sometimes the background values seems to override .

Even though I gave the opaque color, then too.
something like this :

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[prackode]

@martynasma
Below is the code for creating label.

_createUpdateLabel(lastData) {
    if (!this.currentValueDataItem) {
      let currentValueDataItem =  valueAxis.createAxisRange(
         valueAxis.makeDataItem({ value: 0 })
      );
      this.currentValueDataItem = currentValueDataItem;
    }

    let currentLabel = this.currentValueDataItem.get("label");

    if (currentLabel) {
      currentLabel.setAll({
        fill: am5.color(0xffffff),
      })
    }

    let closeValue = lastData?.Close;
    let openValue = lastData?.Open;

    this.currentValueDataItem.animate({
      key: "value",
      to: closeValue,
      duration: 500,
      easing: am5.ease.out(am5.ease.cubic),
    });

    // Ensure the existence or update of the label
    if (!currentLabel) {
      // If the label doesn't exist, create it
      currentLabel = this.currentValueDataItem.set("label", am5.Label.new( root, {}));
    }

    currentLabel.set("text",  .stockChart.getNumberFormatter().format(closeValue));
    currentLabel.set("opacity", 1);
    var bg = currentLabel.get("background") || currentLabel.set("background", am5.Rectangle.new( root, {}));

    if(bg){
      if(closeValue < openValue){
        bg.set("fill", am5.color("rgba(235, 91, 60, 1)"));
      }else{
        bg.set("fill", am5.color("rgba(10, 187, 146, 1)"));
      }
    }
  }

I don't want this :

• It should be opaque at any case.

[martynasma]

Have you tried setting fillOpacity: 0 label's background?

bg.set("fillOpacity", 1);

[prackode]

Did that @martynasma

Now my full code looks like

_createUpdateLabel(lastData) {
    if (!this.currentValueDataItem) {
      let currentValueDataItem =  valueAxis.createAxisRange(
         valueAxis.makeDataItem({ value: 0 })
      );
      this.currentValueDataItem = currentValueDataItem;
    }

    let currentLabel = this.currentValueDataItem.get("label");

    if (currentLabel) {
      currentLabel.setAll({
        fill: am5.color(0xffffff),
      })
    }

    let closeValue = lastData?.Close;
    let openValue = lastData?.Open;

    this.currentValueDataItem.animate({
      key: "value",
      to: closeValue,
      duration: 500,
      easing: am5.ease.out(am5.ease.cubic),
    });

    // Ensure the existence or update of the label
    if (!currentLabel) {
      // If the label doesn't exist, create it
      currentLabel = this.currentValueDataItem.set("label", am5.Label.new( root, {}));
    }
    currentLabel.set("text",  this.chartInstance.stockChart.getNumberFormatter().format(closeValue));
    currentLabel.set("opacity", 1);
    currentLabel.set("fillOpacity", 1);
    var bg = currentLabel.get("background") || currentLabel.set("background", am5.Rectangle.new( this.chartInstance.instance, {}));
    // bg.setAll({
    //   fill: am5.color(closeValue < openValue ? "rgba(235, 91, 60, 1)" : "rgba(10, 187, 146, 1)"),
    // });
    bg.set("fillOpacity", 1);
    if(bg){
      if(closeValue < openValue){
        bg.set("fill", am5.color("rgba(235, 91, 60, 1)"));
      }else{
        bg.set("fill", am5.color("rgba(10, 187, 146, 1)"));
      }
    }

[martynasma]

Are you seeing the same issue here?
https://www.amcharts.com/demos/live-stock-data/

[prackode]

I got the issue, actually my valueAxis opacity was : 0.7 that's why it was giving the transparent look. Sorry @martynasma my bad.

But still I am able to see 2 ticks like this :

code pen to see : https://codepen.io/Ansh-m-the-reactor/pen/bGPNQBL?editors=1010

[prackode]

I don't want to see this two ticks in the label how can I achieve this ?
@martynasma

[martynasma]

Just disable it:

currentValueDataItem.get("tick").set("forceHidden", true);

[prackode]

@martynasma How can I fix the width of the label, currently its dynamic according to the the number.

[martynasma]

Have you tried setting width on it?

[prackode]

@martynasma I want it to sync it with the valueAxis width, so whatever the width of the valueAixs I want the same to be of lablel.
I tried getting the width of valueAxis but it was undefined, I guess it is dynamically set.

• Either I can handle it dynamically and sync label width with the valueAxis.

OR

• Sometime I get the value in decimals then it shows bigger label and sometimes it I get in whole number then it gets smaller.

So If I can make it constant? Like if we get the decimal value then show it else show ZERO after decimal number by this way the label size will be fixed.

[martynasma]

Maybe you can use an adapter:

currentLabel.adapters.add("width", function(width, target) {
  return yAxis.width();
});

[github-actions]

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.