[Chartjs]-Change color of one value in the x-axis charts.js

by

1👍

You can use a scriptable option for the tick color for this:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
        label: ['Head_1= Right Lane'],
        data: [10, 5, 6],
        backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
        borderColor: ['rgba(255, 99, 132, 1)', ],
        borderWidth: 1,
      },

      {
        label: ['Head_2 = High Speed'],
        data: [2, 6, 5],
        backgroundColor: ['rgba(54, 162, 235, 0.2)', ],
        borderColor: ['rgba(54, 162, 235, 1)', ],
        borderWidth: 1,
      },

      {
        label: ['Head_3 = Change Lane'],
        data: [10, 3, 4],
        backgroundColor: ['rgba(255, 206, 86, 0.2)', ],
        borderColor: ['rgba(255, 206, 86, 1)', ],
        borderWidth: 1,
      }
    ]
  },
  options: {
    scales: {
      x: {
        stacked: true,
        grid: {
          display: false
        },
        ticks: {
          color: (ctx) => {
            const maxValues = ctx.chart.data.datasets.reduce((acc, curr) => {
              curr.data.forEach((e, i) => {
                if (acc[i]) {
                  acc[i] = acc[i] + e;
                } else {
                  acc[i] = e;
                }
              });
              return acc;
            }, {});

            const labelIndex = ctx.chart.data.labels.indexOf(ctx.tick.label);

            return maxValues[labelIndex] === Math.max(...Object.values(maxValues)) ? 'blue' : 'red'
          }
        }
      },
      y: {
        stacked: true,
        grid: {
          display: 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.6.0/chart.js"></script>
</body>

On a side note, namespace for the grid has been changed in V3 from gridLines to grid thats why your gridlines are not hidden.

Leave a comment