I am creating a custom legend for a Google Chart which will display statistics for each series. I'm using a Google Table for this. As it is also the legend, I want the first column to have color markers which correspond to the colors in the chart. But I can't find anything in the Google Charts API which provides a means of asking a chart what colors are being used for each series.
The charts do not provide a means to get the color of a series, but you can assign your own colors (via the colors
or series.<series index>.color
options) and use them in your custom legend.
colors: ['#c038b1', '#5071c7', '#6a57b3']
or:
series: {
0: {
// set the options for the first series
color: '#c038b1'
},
1: {
// set the options for the second series
color: '#5071c7'
},
2: {
// set the options for the third series
color: '#6a57b3'
}
}
If you want to use the default colors, this is the list:
['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00', '#b82e2e', '#316395', '#994499', '#22aa99', '#aaaa11', '#6633cc', '#e67300', '#8b0707', '#651067', '#329262', '#5574a6', '#3b3eac', '#b77322', '#16d620', '#b91383', '#f4359e', '#9c5935', '#a9c413', '#2a778d', '#668d1c', '#bea413', '#0c5922', '#743411']
you have to use
className or cssClassNames or style
and apply what ever properties you need like color, font size etc
https://developers.google.com/chart/interactive/docs/gallery/table#Example
Example:
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'color:red; font-size:22px;'});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With