CODEWITHSUNDEEP
javascriptamchartsamstock
Kashyap Kotak
Kashyap Kotak

Reputation: 1938

Change all the font colors in amStockChart dynamically after the chart is drawn

I have a website where I am using amStockCharts. The problem is that when I turn on the dark theme of the website, all the labels of amCharts: legends, date time range, zoom levels, etc hide in the black background because of black font.

How can I change the charts font color dynamically instead of changing it from javascript for all the classes with text in them?

This is different from Amcharts Inherit Font or set all Element Font as I want to change the color after chart is drawn and so I cannot set it in config or init methods.

AmChart seem to be using inline styles and hence not inheriting my color property set to #fff in super elements (even after !important). Here is what I can see when I make my background dark:

enter image description here

Upvotes: 2

Views: 877

Answers (1)

KCK
KCK

Reputation: 2033

You rightly said that amCharts does use inline styles. I encountered the same problem some time back and used the below css: (lightsOff is a class to my body tag in below eg., & chartdiv the div for drawing the chart as given by amCharts)

.lightsOff #chartdiv text, .lightsOff #chartdiv input, .lightsOff .amChartsPeriodSelector {
    color: #fff !important;
    fill: #fff !important;
}

Though this is not what you are exactly asking for, as I assume you are asking for some method or changing the charts property value and validating the chart again, but this one maybe simpler than that.

Upvotes: 2

Related Questions