Chartjs-ChartJS Radar Change Label Color

by

0👍

OK. Below I give you an example with useful links to the documentation.

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
    datasets: [{
      label: 'Data',
      data: [3.5, 5, 2.5, 3],
      borderWidth: 1
    }]
  },
  options: {
    locale: 'en-US',
    scale: {
      min: 1,
      max: 6,
      ticks: {
        stepSize: 0.5,
      }
    },
    scales: {
      r: { // https://www.chartjs.org/docs/latest/axes/radial/
        angleLines: {
          color: 'gray'
        },
        grid: {
          color: 'gray'
        },
        pointLabels: { // https://www.chartjs.org/docs/latest/axes/radial/#point-labels
          color: 'white'
        },
        ticks: { // https://www.chartjs.org/docs/latest/axes/radial/#ticks
          color: 'white',
          backdropColor: 'transparent' // https://www.chartjs.org/docs/latest/axes/_common_ticks.html
        }
      }
    },
    plugins: {
      title: { // https://www.chartjs.org/docs/latest/configuration/title.html
        display: true,
        text: 'Title',
        color: 'white'
      },
      legend: {
        labels: { // https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
          color: 'white'
        }
      }
    }
  }
});
.chart-container {
  position: relative;
  height: 90vh;
}

canvas {
  background: #282a2d;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

Leave a comment