google / google-visualization-issues

288 stars 35 forks source link

Google Line Chart change the line color by Y value variation #2954

Closed jhyang-airdeep closed 2 years ago

jhyang-airdeep commented 2 years ago

I'm using Google line chart. I want to change the graph color change by the vAxis tick variation. For example...

case 1 : 0 <= value <= 20 , color : blue(Of course RGB code will input)
case 1 : 20 <= value <= 40 , color : green
case 1 : 40 <= value <= 60 , color : yellow
case 1 : 60 <= value <= 80 , color : orange
case 1 : 80 <= value <= 100 , color : red

function drawGChart(data, color, id) {
            var options = {
              animation:{
                duration: 600,
              },
              curveType: 'function',
              fontSize: 11,
              vAxis:{
                        ticks: [{
                            v: [0, 20]
                            , color: airQualityColorGood
                          }, {
                            v: [20, 40]
                            , color: airQualityColorNormal
                          }, {
                            v: [40, 60]
                            , color: airQualityColorBad
                      },{
                       v: [60, 80]
                      , color: airQualityVeryBad
                        }]
                  },
              hAxis: {
                  textStyle: {
                    fontSize: 11
                  }
                },
              legend: { position: 'none' },
              series: {
                  0: { color: color },
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById(id));

            chart.draw(data, options);
       }

I think there will be option about ticks may helpful for me and wrote the code like this, but it doesn't work.

data form is ["timeseries", "value"]. Is there any option can help me? Or, should I use another chart library?