Line Chart Boundaries

Line Chart Boundaries - 图1

Fill: false (default) Fill: origin Fill: start Fill: end Randomize Smooth

data config setup actions

  1. const data = {
  2. labels: generateLabels(),
  3. datasets: [
  4. {
  5. label: 'Dataset',
  6. data: generateData(),
  7. borderColor: Utils.CHART_COLORS.red,
  8. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
  9. fill: false
  10. }
  11. ]
  12. };
  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. plugins: {
  6. filler: {
  7. propagate: false,
  8. },
  9. title: {
  10. display: true,
  11. text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
  12. }
  13. },
  14. interaction: {
  15. intersect: false,
  16. }
  17. },
  18. };
  1. const inputs = {
  2. min: -100,
  3. max: 100,
  4. count: 8,
  5. decimals: 2,
  6. continuity: 1
  7. };
  8. const generateLabels = () => {
  9. return Utils.months({count: inputs.count});
  10. };
  11. const generateData = () => (Utils.numbers(inputs));
  1. let smooth = false;
  2. const actions = [
  3. {
  4. name: 'Fill: false (default)',
  5. handler: (chart) => {
  6. chart.data.datasets.forEach(dataset => {
  7. dataset.fill = false;
  8. });
  9. chart.update();
  10. }
  11. },
  12. {
  13. name: 'Fill: origin',
  14. handler: (chart) => {
  15. chart.data.datasets.forEach(dataset => {
  16. dataset.fill = 'origin';
  17. });
  18. chart.update();
  19. }
  20. },
  21. {
  22. name: 'Fill: start',
  23. handler: (chart) => {
  24. chart.data.datasets.forEach(dataset => {
  25. dataset.fill = 'start';
  26. });
  27. chart.update();
  28. }
  29. },
  30. {
  31. name: 'Fill: end',
  32. handler: (chart) => {
  33. chart.data.datasets.forEach(dataset => {
  34. dataset.fill = 'end';
  35. });
  36. chart.update();
  37. }
  38. },
  39. {
  40. name: 'Randomize',
  41. handler(chart) {
  42. chart.data.datasets.forEach(dataset => {
  43. dataset.data = generateData();
  44. });
  45. chart.update();
  46. }
  47. },
  48. {
  49. name: 'Smooth',
  50. handler(chart) {
  51. smooth = !smooth;
  52. chart.options.elements.line.tension = smooth ? 0.4 : 0;
  53. chart.update();
  54. }
  55. }
  56. ];