Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera
Created Jun 5, 2019
Embed
What would you like to do?
class LineChart {
constructor () {
this.init()
}
init () {
this.lineChart()
}
lineChart () {
$.ajax({
url: '/line-chart',
method: 'GET',
success: function (response) {
const data = {
type: 'line',
data: {
labels: response.months,
datasets: [{
label: 'Beneficios',
backgroundColor: Looper.colors.brand.purple,
borderColor: Looper.colors.brand.purple,
data: response.data,
fill: false,
}]
},
options: {
title: {
display: true,
text: 'Beneficios'
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, data) {
let label = `Beneficios: ${data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '0'}`;
if (label) {
label += '€';
}
return label;
}
}
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
ticks: {
maxRotation: 0,
maxTicksLimit: 5
}
}]
}
}
};
// init chart line
const canvas = $('#canvas-line-chart')[0].getContext('2d')
new Chart(canvas, data)
}
})
}
}
$(document).ready(() => {
new LineChart()
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment