score:0

Accepted answer

the key point is to address the correct properties in the chart configuration when changing the data. these are basically chart.data.datasets[0]backgroundcolor, chart.options.scales.x.ticks.color and chart.options.scales.x.ticks.font.weight.

please take a look at your amended code below and see how it could work.

new chart("barchart", {
  type: 'bar',
  data: {
    labels: ["jan", "fab", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"],
    datasets: [{
      label: 'data',
      data: [8, 2, 3, 0, 5, 2, 2, 0, 0, 6, 10, 2],
      backgroundcolor: 'rgb(197,197,197)',
      borderradius: 6,
      borderskipped: false,
      barthickness: 20
    }]
  },
  options: {
    onclick: (event, elements, chart) => {
      if (elements.length) {
        const dataset = chart.data.datasets[0];
        dataset.backgroundcolor = [];
        const ticks = chart.options.scales.x.ticks;
        ticks.color = [];
        ticks.font.weight = [];
        const i = elements[0].index;
        for (let i = 0; i < dataset.data.length; i++) {
          if (elements[0].index == i) {
            dataset.backgroundcolor[i] = 'rgb(32,32,32)';
            ticks.color[i] = 'rgb(32,32,32)';
            ticks.font.weight[i] = 600;
          } else {
            dataset.backgroundcolor[i] = 'rgb(197,197,197)';
            ticks.color[i] = 'rgb(153,153,153)';
            ticks.font.weight[i] = 400;
          }
        }
        chart.update();
      }
    },
    scales: {
      y: {
        display: false
      },
      x: {
        grid: {
          color: 'white',
          drawborder: false
        },
        ticks: {
          color: 'rgb(153,153,153)',
          font: {
            family: "'pretendard', sans-serif",
            weight: 400
          }
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.1/chart.min.js"></script>
<canvas id="barchart"></canvas>


Related Query

More Query from same tag