Javascript – Google chart point color

chartsgoogle-visualizationjavascript

Is it possible to change point color in Google chart api, something like this:

From this:
Default

To this: enter image description here

Thanks!

Best Answer

Try taking a look at this jsFiddle Example created by asgallant here

"There is no support in the API for making lines and data points have different colors in the same series. You can fake what you want, though, by using a DataView with your data repeated in two columns. Make the first series colored 'black' and the second colored 'red' with lineWidth = 0 and pointSize > 0."

From the Example:

var options = {
        title: 'Load vs Length',
        titlePosition: 'out',
        legend: {
            position: 'none'
        },
        hAxis: {
            title: 'Length (inch)',
            viewWindow: {
                min: 0
            },
            format: '#.000'
        },
        vAxis: {
            title: 'Load (pound)',
            viewWindow: {
                min: 0
            }
        },
        series: { //Create 2 separate series to fake what you want. One for the line             and one for the points
            0: {
                color: 'black',
                lineWidth: 2
            },
            1: {
                color: 'red',
                lineWidth: 0,
                pointSize: 5
            }
        }