amCharts - Multiple hyper links in a label

Question

Is it possible to have multiple links in the same label? I would like to be able to click on "Data One" or "Data Two" and be directed to different urls.

var sourceLabel = chart.createChild(am4core.Label);
sourceLabel.text = "Source: Date one & Data Two";
sourceLabel.align = "right";
sourceLabel.interactionsEnabled = true;
sourceLabel.url = "https://data-one.html";

score 2 · Accepted Answer · answered Jun 30 '20 at 01:40

You can have two links in the same label if you use html instead of text:

sourceLabel.html = '<a href="path/to/data-one.html">Data One</a> &amp; <a href="path/to/data-two.html">Data Two</a>'

If you don't want to use html, then your only option is to create two separate labels.

var chart = am4core.create("chartdiv", am4charts.XYChart);
var sourceLabel = chart.createChild(am4core.Label);
sourceLabel.html = '<a href="path/to/data-one.html">Data One</a> &amp; <a href="path/to/data-two.html">Data Two </a>'

chart.data = [{
  "category": "Research",
  "value": 450
}, {
  "category": "Marketing",
  "value": 1200
}, {
  "category": "Distribution",
  "value": 1850
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

amCharts - Multiple hyper links in a label

1 Answers1