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.

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.

• javascript
• google-visualization

2 Answers 2

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./chart/interactive/docs/gallery/table#Example

Example:

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'color:red; font-size:22px;'});