简体   繁体   中英

AmCharts5: How to change the x axis label and tooltip using a DateAxis?

With the amcharts4 I do something like this for the change tooltip and label text for the x axis with the CategoryAxis...

// change tooltip
this.xAxis.adapter.add("getTooltipText", (text, target) => {
    const value = text ? parseInt(text) : -1;
    return this.getAxisToolTipText(value);
});

// change label
this.xAxis.renderer.labels.template.adapter.add("text", (text, target) => {
    const value = target.dataItem && target.dataItem.category ? parseInt(target.dataItem.category) : -1;
    return this.getAxisText(value, text);
});

But now, how to do the same for the Amcharts5 with DateAxis?

I will appreciate any suggestions.

Use adapters to dynamically modify setting value of its target element.

Axis labels:

xAxis.get("renderer").labels.template.adapters.add("html", function(html, target) {
  return "<div style=\"text-align: center; font-weight: bold;\">{value.formatDate('d MMM')}</div><div style=\"text-align: center;\">{value.formatDate('EEE')}</div>";
});

See amCharts5 - Axis labels

Axis tooltip

xAxis.get("tooltip").adapters.add("labelText", function(text, target) {
  return "Custom text";
});

AxisRenderX documentation

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM