score:0

you can use the scriptable backgroundcolor and segments for this, you need to improve the calculation a bit on when to show what color but its a basic starting point

example:

var options = {
  type: 'line',
  data: {
    labels: ["red", "", "blue", "", "yellow", "", "green", "", "purple", "", "orange"],
    datasets: [{
      label: '# of votes',
      data: [12, 15.5, 19, 11, 3, 4, 5, 3.5, 2, 2.5, 3],
      borderwidth: 1,
      pointradius: (ctx) => (ctx.index % 2 === 0 ? 3 : 0),
      backgroundcolor: (ctx) => {
        if (ctx.parsed === undefined) return;

        return ctx.parsed.y > 16 ? 'orange' : ctx.parsed.y > 12 ? 'green' : ctx.parsed.y > 8 ? 'purple' : ctx.parsed.y > 4 ? 'blue' : 'black'
      },
      segment: {
        bordercolor: ctx => (ctx.p1.parsed.y > 16 ? 'orange' : ctx.p1.parsed.y > 12 ? 'green' : ctx.p1.parsed.y > 8 ? 'purple' : ctx.p1.parsed.y > 4 ? 'blue' : 'black')
      }
    }]
  },
  options: {
    scales: {
      yaxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.3.2/chart.js"></script>
</body>


Related Query

More Query from same tag