Is it possible to change color of individual rings in polar chart using anychart charting library?
Code:
drawPolarChart() {
// create data set on our data
var chartData = {
rows: [
['Flow', 10],
['Energy', 20],
['Commitment', 100],
]
};
// sort data by X - // set series type - // disable y-axis - // set x-scale
this.chart.sortPointsByX(true).defaultSeriesType('column').yAxis(true).xScale('ordinal');
// set max y-axis values.
this.chart.yScale().maximum(100).ticks().interval(10);
// set 50th percentile to red dotted ring.
// set chart data
this.chart.data(chartData);
// set title margin
this.chart.title().margin().bottom(20);
// set stack mod
this.chart.yScale().stackMode('value');
// set tooltip settings
this.chart.tooltip().valuePostfix('%').displayMode('union');
// set chart container id
this.chart.container('chartContainer');
// initiate chart drawing
this.chart.draw();
}
I intend to change the ring labeled '50' to any color of my choice?
Edit Similar to this but I am unable to make it work for other specific rings.
If you want to customize the charts you can use custom theme option, https://docs.anychart.com/Appearance_Settings/Themes#out_of_the_box_themes
Out of the box Themes can be located either at Themes Section at AnyChart CDN or in the AnyChart Downloadable Package, these themes change the look, feel and layout of every chart, map, gauge, treemap or stock chart. You are free to use and modify these themes as you want. To use any of these themes you need, just with any External theme reference the proper file in HTML document and then apply theme by name:
<head>
<!--Link to the files with out of the box themes -->
<script src="https://cdn.anychart.com/themes/2.0.0/coffee.min.js"></script>
<script src="https://cdn.anychart.com/themes/2.0.0/dark_blue.min.js"></script>
<script>
anychart.onDocumentReady(function () {
// data
var data = [
["Department Stores", 637166],
["Discount Stores", 721630],
["Men's/Women's Specialty Stores", 148662],
["All other outlets", 90000]
];
// apply coffee theme
anychart.theme(anychart.themes.coffee);
// apply dark blue theme
// anychart.theme(anychart.themes.darkBlue);
// create and display chart
var chart = anychart.bar();
chart.bar(data);
chart.container("container");
chart.draw();
});
</script>
</head>