Google Line Chart: Different colors for specific ranges

Question

https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=ja#Configuration_Options

How can I specify different colors for a single line dependent on the particular range? For example, one line should be blue from 0 to 10 and red from 10 to 20.

Answer 1

Short answer: you can't.

Long answer: you can build a lengthy workaround, but each step will present different issues that you may find worse than a single-colored line.

Run a loop through your data so that each color is in a different column for each series. This is the quickest way.

For instance, if you have data:

  var data = google.visualization.arrayToDataTable([
    ['Month', 'Data'],
    ['2004/05', 123],
    ['2005/06', 234],
    ['2006/07', 345],
    ['2007/08', 456],
    ['2008/09', 789]

And you want to split it in to 3 colors: <300, 300-600

600

You can write a script to make your data look like this:

  var data = google.visualization.arrayToDataTable([
    ['Month', 'Red', 'Green', 'Blue'],
    ['2004/05', 123, null, null],
    ['2005/06', 234, null, null],
    ['2006/07', null, 345, null],
    ['2007/08', null, 456, null],
    ['2008/09', null, null, 789]

The above will give you colored points for each different range. If you actually want the lines connecting them to change color as soon as they cross a certain threshold, you have to calculate the intercept of 300 with whatever day, and add that to the series. Same with 600. You'd also have to change the "Month" series to actually be date values so you can set the point in between correctly. Of course, those intermediate points will show up too, which is a different headache...

You can also fiddle around with domains but those won't help you with the coloring (but will help you to connect the different points to the same series).