Search code examples
javascriptchartsamcharts

Add styles to AmCharts 4 labels


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.


Solution

  • 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