Alignment

This sample show how to configure the alignment of the chart title

Alignment - 图1

Title Alignment: startTitle Alignment: center (default)Title Alignment: end

config setup actions

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     plugins: {
  6.       title: {
  7.         display: true,
  8.         text: 'Chart Title',
  9.       }
  10.     }
  11.   }
  12. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const data = {
  4.   labels: Utils.months({count: DATA_COUNT}),
  5.   datasets: [
  6.     {
  7.       label: 'Dataset 1',
  8.       data: Utils.numbers(NUMBER_CFG),
  9.       fill: false,
  10.       borderColor: Utils.CHART_COLORS.red,
  11.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12.     },
  13.   ]
  14. };
  1. const actions = [
  2.   {
  3.     name: 'Title Alignment: start',
  4.     handler(chart) {
  5.       chart.options.plugins.title.align = 'start';
  6.       chart.update();
  7.     }
  8.   },
  9.   {
  10.     name: 'Title Alignment: center (default)',
  11.     handler(chart) {
  12.       chart.options.plugins.title.align = 'center';
  13.       chart.update();
  14.     }
  15.   },
  16.   {
  17.     name: 'Title Alignment: end',
  18.     handler(chart) {
  19.       chart.options.plugins.title.align = 'end';
  20.       chart.update();
  21.     }
  22.   },
  23. ];

Docs