Line Styling

Line Styling - 图1

config setup

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     responsive: true,
  6.     plugins: {
  7.       title: {
  8.         display: true,
  9.         text: 'Chart.js Line Chart'
  10.       },
  11.     },
  12.     interaction: {
  13.       mode: 'index',
  14.       intersect: false
  15.     },
  16.     scales: {
  17.       x: {
  18.         display: true,
  19.         title: {
  20.           display: true,
  21.           text: 'Month'
  22.         }
  23.       },
  24.       y: {
  25.         display: true,
  26.         title: {
  27.           display: true,
  28.           text: 'Value'
  29.         }
  30.       }
  31.     }
  32.   },
  33. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  4. const labels = Utils.months({count: DATA_COUNT});
  5. const data = {
  6.   labels: labels,
  7.   datasets: [
  8.     {
  9.       label: 'Unfilled',
  10.       fill: false,
  11.       backgroundColor: Utils.CHART_COLORS.blue,
  12.       borderColor: Utils.CHART_COLORS.blue,
  13.       data: Utils.numbers(NUMBER_CFG),
  14.     }, {
  15.       label: 'Dashed',
  16.       fill: false,
  17.       backgroundColor: Utils.CHART_COLORS.green,
  18.       borderColor: Utils.CHART_COLORS.green,
  19.       borderDash: [5, 5],
  20.       data: Utils.numbers(NUMBER_CFG),
  21.     }, {
  22.       label: 'Filled',
  23.       backgroundColor: Utils.CHART_COLORS.red,
  24.       borderColor: Utils.CHART_COLORS.red,
  25.       data: Utils.numbers(NUMBER_CFG),
  26.       fill: true,
  27.     }
  28.   ]
  29. };

Docs