Stacked Linear / Category

Stacked Linear / Category - 图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: 'Stacked scales',
10. },
11. },
12. scales: {
13. y: {
14. type: 'linear',
15. position: 'left',
16. stack: 'demo',
17. stackWeight: 2,
18. border: {
19. color: Utils.CHART_COLORS.red
20. }
21. },
22. y2: {
23. type: 'category',
24. labels: ['ON', 'OFF'],
25. offset: true,
26. position: 'left',
27. stack: 'demo',
28. stackWeight: 1,
29. border: {
30. color: Utils.CHART_COLORS.blue
31. }
32. }
33. }
34. },
35. };

1. const DATA_COUNT = 7;
2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};

4. const labels = Utils.months({count: 7});
5. const data = {
6. labels: labels,
7. datasets: [
8. {
9. label: 'Dataset 1',
10. data: [10, 30, 50, 20, 25, 44, -10],
11. borderColor: Utils.CHART_COLORS.red,
12. backgroundColor: Utils.CHART_COLORS.red,
13. },
14. {
15. label: 'Dataset 2',
16. data: ['ON', 'ON', 'OFF', 'ON', 'OFF', 'OFF', 'ON'],
17. borderColor: Utils.CHART_COLORS.blue,
18. backgroundColor: Utils.CHART_COLORS.blue,
19. stepped: true,
20. yAxisID: 'y2',
21. }
22. ]
23. };

Docs