[Chartjs]-Change stroke line color in chart according to datasets in react native

by

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>

Leave a comment