chart.js
1.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import palette from 'theme/palette';
export const data = {
labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug'],
datasets: [
{
label: 'This year',
backgroundColor: palette.primary.main,
data: [18, 5, 19, 27, 29, 19, 20]
},
{
label: 'Last year',
backgroundColor: palette.neutral,
data: [11, 20, 12, 29, 30, 25, 13]
}
]
};
export const options = {
responsive: true,
maintainAspectRatio: false,
animation: false,
legend: { display: false },
cornerRadius: 20,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
borderWidth: 1,
borderColor: palette.divider,
backgroundColor: palette.white,
titleFontColor: palette.text.primary,
bodyFontColor: palette.text.secondary,
footerFontColor: palette.text.secondary
},
layout: { padding: 0 },
scales: {
xAxes: [
{
barThickness: 12,
maxBarThickness: 10,
barPercentage: 0.5,
categoryPercentage: 0.5,
ticks: {
fontColor: palette.text.secondary
},
gridLines: {
display: false,
drawBorder: false
}
}
],
yAxes: [
{
ticks: {
fontColor: palette.text.secondary,
beginAtZero: true,
min: 0
},
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: palette.divider,
drawBorder: false,
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
zeroLineColor: palette.divider
}
}
]
}
};