Search code examples
javascriptamchartsamcharts4

Customize Amcharts v4 tooltip border color

I've applied code like this:

var series = chart.series.push(new am4charts.LineSeries());
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
series.tooltip.border.fill = am4core.color("#000");
series.tooltip.label.fill = am4core.color("#000");
series.tooltipText = "{date.formatDate('d MMM, yyyy')}: [bold]{value}";
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";

But somehow tooltip is not loaded with border color.

Solution

  • In amcharts the field for the border color is stroke. You can set it eiter on the tooltip itself, on the tooltip.background or on the tooltip.label. For example like this:

    series.tooltip.background.stroke = am4core.color("#000");

    You also can change the border width using strokeWidth:

    series.tooltip.background.strokeWidth = 2;

    Here is a working code pen.