Version 3.3.0 of our charting packages and version 3.8.0 of our mapping package supports themes. This means that instead of setting every property for each graph or axis or any other object, you can set new defaults in a theme file. This will make devs' life a lot easier!
Take a quick look at this sample.
No colors are set in JS configuration, they are all defined in the light.js file (check resources section). Now, change background color of a div to some dark one #282828 for example, and change theme from JSON config from "light" to "dark". Run the script and you should see that the chart now use different color scheme, adjusted for dark background.
And here is another sample, illustrating how you can change themes at run time.
Currently you’ll find five themes in amcharts/themes (or ammap/themes) folder of amcharts/ammap package. You can easily modify these themes and adjust them to your needs. Note, you can add any property used by the class to the themes file. Check our class reference for the list of all properties. And of course – you can still set any property in chart’s configuration as the values set in chart’s config will override the ones set in theme file.
To set a theme for a chart, first include theme file on your web page:
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
Then simply set theme property to the name of the file: "theme": "light".
var chart = AmCharts.makeChart( "chartdiv", {
"theme": "light",
// ... the rest of the options
} );
Note, this will work only if you are creating chart using JSON config. If you do it in old way (JSON config is supported since v 3.2.0), you should pass theme object for each new object you build, for example:
var graph = new AmCharts.AmGraph(AmCharts.themes.light);
Or you can set theme on all charts:
AmCharts.theme = AmCharts.themes.light;
And in case you’ve created or will create a nice theme, we would be glad to share it for all our users!