Title Configuration

This sample shows how to configure the title of an axis including alignment, font, and color.

Title Configuration - 图1

config setup

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     responsive: true,
  6.     scales: {
  7.       x: {
  8.         display: true,
  9.         title: {
  10.           display: true,
  11.           text: 'Month',
  12.           color: '#911',
  13.           font: {
  14.             family: 'Comic Sans MS',
  15.             size: 20,
  16.             weight: 'bold',
  17.             lineHeight: 1.2,
  18.           },
  19.           padding: {top: 20, left: 0, right: 0, bottom: 0}
  20.         }
  21.       },
  22.       y: {
  23.         display: true,
  24.         title: {
  25.           display: true,
  26.           text: 'Value',
  27.           color: '#191',
  28.           font: {
  29.             family: 'Times',
  30.             size: 20,
  31.             style: 'normal',
  32.             lineHeight: 1.2
  33.           },
  34.           padding: {top: 30, left: 0, right: 0, bottom: 0}
  35.         }
  36.       }
  37.     }
  38.   },
  39. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, 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.       label: 'Dataset 2',
  15.       data: Utils.numbers(NUMBER_CFG),
  16.       fill: false,
  17.       borderColor: Utils.CHART_COLORS.blue,
  18.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19.     }
  20.   ]
  21. };

Docs