[Chartjs]-How can I assign green for an uptrend in line chart in chart-js and red for a downtrend in chart-js?

1👍

You can use segments for this:

var dataReqdFormat = {
  labels: [],
  datasets: [{
    data: [],
    label: "Nifty",
    fill: true,
    segment: {
      borderColor: ctx => ctx.p1.parsed.y <= ctx.p0.parsed.y ? 'red' : 'green'
    }
  }]
};

Live example:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Silver"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 4],
      segment: {
        borderColor: ctx => ctx.p1.parsed.y <= ctx.p0.parsed.y ? 'red' : 'green'
      }
    }]
  }
}

const 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.8.0/chart.js"></script>
</body>

Edit:
You can use a scriptable function for this:

var dataReqdFormat = {
  labels: [],
  datasets: [{
    data: [],
    label: "Nifty",
    fill: true,
    borderColor: (ctx) => {
      const data = ctx.chart.data.datasets[ctx.datasetIndex].data;
      return data[0] >= data[data.length - 1] ? 'red' : 'green'
    }
  }]
};

Live example:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Silver"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 40],
      borderColor: (ctx) => {
        const data = ctx.chart.data.datasets[ctx.datasetIndex].data;
        return data[0] >= data[data.length - 1] ? 'red' : 'green'
      }
    }]
  }
}

const 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.8.0/chart.js"></script>
</body>

Leave a comment