[Chartjs]-Chartjs Options are ignored

by

2👍

✅

As defined at each docs part for that specific thing (https://www.chartjs.org/docs/master/configuration/legend.html#configuration-options) you can see the namespace, in which you can see that the title and legend have to be configurated in the plugins section since they are internal plugins, this is also stated in the migration docs (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)

Live working example:

let config01 = {
  type: 'doughnut',
  data: {
    labels: [
      'Part 01',
      'Part 02',
      'Part 03'
    ],
    datasets: [{
      data: [2000, 1000, 600],
      backgroundColor: [
        'rgb(0, 76, 138)',
        'rgb(50, 151, 230)',
        'rgb(250, 202, 55)',
      ],
      hoverOffset: 10
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'bottom',
        color: '#000000',
        labels: {
          usePointStyle: true,
        }
      },
      title: {
        display: true,
        text: 'Some Title',
        font: {
          color: 'rgb(0, 18, 58)',
          size: 5
        },
      }
    },

    animation: {
      duration: 1000,
      easing: "linear"
    },

  }
};

var ctx = document.getElementById('myChart-01').getContext('2d');
new Chart(ctx, config01);
div {
  max-width: 200px;
  max-height: 200px;
}
<div>
  <canvas id="myChart-01" width="200px" height="200px"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
</div>

2👍

legend and title are meant to be in options.plugins:

options: {
  plugins: {
    legend: {
      position: 'bottom',
      color: '#000000',
      labels: {
        usePointStyle: true,
      }
    },
    title: {
      display: true,
      text: 'Some Title',
      fontColor: 'rgb(0, 18, 58)',
      padding: 5,
      font: {
        size: '18'
      }
    }
  },
  animation: {
    duration: 1000,
    easing: "linear"
  }
}

Leave a comment