Blame view
html/public/assets/js/charts-lines.js
1.66 KB
5f2a2635a
Справочник Должно...
|
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 |
/**
* For usage, visit Chart.js docs https://www.chartjs.org/docs/latest/
*/
const lineConfig = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Organic',
/**
* These colors come from Tailwind CSS palette
* https://tailwindcss.com/docs/customizing-colors/#default-color-palette
*/
backgroundColor: '#0694a2',
borderColor: '#0694a2',
data: [43, 48, 40, 54, 67, 73, 70],
fill: false,
},
{
label: 'Paid',
fill: false,
/**
* These colors come from Tailwind CSS palette
* https://tailwindcss.com/docs/customizing-colors/#default-color-palette
*/
backgroundColor: '#7e3af2',
borderColor: '#7e3af2',
data: [24, 50, 64, 74, 52, 51, 65],
},
],
},
options: {
responsive: true,
/**
* Default legends are ugly and impossible to style.
* See examples in charts.html to add your own legends
* */
legend: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true,
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: 'Month',
},
},
y: {
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
},
},
},
}
// change this to the id of your chart element in HMTL
const lineCtx = document.getElementById('line')
window.myLine = new Chart(lineCtx, lineConfig)
|