Chartjs Options are ignored

Question

I am trying to use a simple ChartJS chart on my site, but all options are ignored. So, my questions seems similar to this, but as far as I can tell, I have the options in the right place.

So, here is the (very simple) code:

JS

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: {
      legend: {
        position: 'bottom',
        color: '#000000',
        labels: {
          usePointStyle: true,
        }
      },
      animation: {
        duration: 1000,
        easing: "linear"
      },
      title: {
        display: true,
        text: 'Some Title',
        fontColor: 'rgb(0, 18, 58)',
        fontSize: '18',
        padding: 5
      }
    }
  };
  
var ctx = document.getElementById('myChart-01').getContext('2d');
new Chart(ctx, config01);

HTML

And here would be a working (without the options being applied) fiddle.

user_6632744 · Answer

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"
  }
}

user_8682983 · Answer

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;
}

Chartjs Options are ignored

2 Answers