Chartjs-Chartjs Radar chart – How to dynamically highlight one of the gridlines at a specific point

by

0👍

enter code hereSince your data is dynamic, you need to compute scale.gridLines.colors based on the data. This could be done as follows:

const data = [80, 90, 60, 65, 78, 97, 55];
const gridLinesStepSize = 20;
const highlightedGridLine = 60;
const gridLineColors = Array.from(Array(Math.ceil(Math.max(...data) / gridLinesStepSize) + 1).keys())
  .map(n => n * 20)
  .slice(1)
  .map(v => v == highlightedGridLine ? 'blue' : gray);

Please take a look at your amended runnable code and see how it works.

const gray = "rgb(200, 200, 200)";
const color = Chart.helpers.color;

const data = [80, 90, 60, 65, 78, 97, 55];
const gridLinesStepSize = 20;
const highlightedGridLine = 60;
const gridLineColors = Array.from(Array(Math.ceil(Math.max(...data) / gridLinesStepSize) + 1).keys())
  .map(n => n * 20)
  .slice(1)
  .map(v => v == highlightedGridLine ? 'blue' : gray);

new Chart('chart', {
  type: 'radar',
  data: {
    labels: [
      ['Eating', 'Dinner'],
      ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'
    ],
    datasets: [{
      label: 'My dataset',
      backgroundColor: color(gray).alpha(0.2).rgbString(),
      borderColor: gray,
      pointBackgroundColor: gray,
      data: data
    }]
  },
  options: {
    scale: {
      gridLines: {
        circular: true,
        color: gridLineColors
      },
      ticks: {
        beginAtZero: true,
        stepsize: gridLinesStepSize
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="chart" height="120"></canvas>

Leave a comment