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};
  3. const labels = Utils.months({count: DATA_COUNT});
  4. const data = {
  5. labels: labels,
  6. datasets: [
  7. {
  8. label: 'Unfilled',
  9. fill: false,
  10. backgroundColor: Utils.CHART_COLORS.blue,
  11. borderColor: Utils.CHART_COLORS.blue,
  12. data: Utils.numbers(NUMBER_CFG),
  13. }, {
  14. label: 'Dashed',
  15. fill: false,
  16. backgroundColor: Utils.CHART_COLORS.green,
  17. borderColor: Utils.CHART_COLORS.green,
  18. borderDash: [5, 5],
  19. data: Utils.numbers(NUMBER_CFG),
  20. }, {
  21. label: 'Filled',
  22. backgroundColor: Utils.CHART_COLORS.red,
  23. borderColor: Utils.CHART_COLORS.red,
  24. data: Utils.numbers(NUMBER_CFG),
  25. fill: true,
  26. }
  27. ]
  28. };

Docs