Link for name attribute in valueSeries

[prackode]

How can I pass the name in valueSeries as a clickable link / html type?

var valueSeries = mainPanel.series.push(
    am5xy.CandlestickSeries.new(instance, {
      name: "${this.instrument}",
      clustered: false,
      valueXField: "Date",
      valueYField: "Close",
      highValueYField: "High",
      lowValueYField: "Low",
      openValueYField: "Open",
      calculateAggregates: true,
      xAxis: dateAxis,
      yAxis: valueAxis,
      legendRangeValueText: "",
    })
);

Or if even I could add a link using am5.Button then also it will be helpful

[martynasma]

Which place do you want the label/link to appear?

[prackode]

Top left:

[martynasma]

Is that a legend?

[prackode]

Yes its legend @martynasma

[martynasma]

So you want to disable default legend behavior which toggles related series, and add a link to it instead?

Should it be separate link, or the whole legend item should open a new url?

[prackode]

Whole legend will do the needful.

[martynasma]

You can disable default click behavior using clickTarget: "none", as well as add your own click event:

var legend = chart.children.push(
  am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50,
    clickTarget: "none"
  })
);

legend.itemContainers.template.events.on("click", function(ev) {
  window.open("https://www.google.com/search?q=" + encodeURIComponent(ev.target.dataItem.dataContext.get("name")));
});

[prackode]

Sorry @martynasma My bad, I want to redirect if the user clicked on the name ` name: "${this.instrument}" not on the valueLegend/legend.

var valueSeries = mainPanel.series.push(
    am5xy.CandlestickSeries.new(instance, {
      name: "${this.instrument}",
      clustered: false,
      valueXField: "Date",
      valueYField: "Close",
      highValueYField: "High",
      lowValueYField: "Low",
      openValueYField: "Open",
      calculateAggregates: true,
      xAxis: dateAxis,
      yAxis: valueAxis,
      legendRangeValueText: "",
    })
);

[martynasma]

In that case you may add click event on a label only:

legend.itemContainers.template.events.on("click", function(ev) {
  window.open("https://www.google.com/search?q=" + encodeURIComponent(ev.target.dataItem.dataContext.get("name")));
});

[prackode]

Tried exactly this @martynasma , can you please help me with a codepen?

[martynasma]

To avoid back and forth, maybe you can post your chart on CodePen, so that I know exactly how your setup looks like?

[prackode]

https://codepen.io/Prakhar-Agarwal-the-styleful/pen/abeOLaO?editors=1111 Note: line 88 to 91

[martynasma]

Thank you.

Events need to be set before data:

valueLegend.itemContainers.template.events.on("click", function(ev) {
  console.log("a")
    window.open("https://www.google.com/search?q=" + encodeURIComponent(ev.target.dataItem.dataContext.get("name")));
});

valueLegend.data.setAll([valueSeries]);

[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.