Add styles to AmCharts 4 labels

2
votes

I have a cylinder bar chart in AmCharts 4 that uses a darker color scheme. The text color for the labels on the bars is black and is not really showing on darker colors.

- I am using the javascript code illustrated in AmChart's Demos for the Cylinder 3D Chart.

Dark Chart with unreadable labels

Is there a way to add css to the label/label text?

I would like to add a white text-shadow to the label to make it readable. Also, this way, it won't affect the text when it is over the white chart background.

Edit: 12/18/2018 - I am looking for the text to be closer to something like this: Readable Chart Labels

These will be able to be seen, even if the bar is short and the text lays against the white background.

2
javascriptchartsamcharts
I assume it's using svg and plopping it in a transformed svg text element. So could do css like svg text { color: red; background-color: white } – Chris W.

2 Answers

10
votes

You could set fill to the labels template:

categoryAxis.renderer.labels.template.fill = am4core.color("#fff");

Please check the example here: https://codepen.io/team/amcharts/pen/3446cd09288ee4e5901c73b3970adbfe?editors=0010

1
votes

You can use CSS to add a white stroke to SVG text. First enable CSS classes for amCharts 4:

am4core.options.autoSetClassName = true;

And then add this to your CSS:

@supports (paint-order: stroke) {
  .amcharts-LabelBullet text {
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
  }
}

This will add a 4px white outline to all LabelBullet text.