Basic

This sample shows basic usage of subtitle.

Basic - 图1

config setup

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. title: {
  7. display: true,
  8. text: 'Chart Title',
  9. },
  10. subtitle: {
  11. display: true,
  12. text: 'Chart Subtitle',
  13. color: 'blue',
  14. font: {
  15. size: 12,
  16. family: 'tahoma',
  17. weight: 'normal',
  18. style: 'italic'
  19. },
  20. padding: {
  21. bottom: 10
  22. }
  23. }
  24. }
  25. }
  26. };
  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. };

Docs