Example 1: chartjs line and bar order
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [10, 20, 30, 40],
order: 2
}, {
label: 'Line Dataset',
data: [10, 10, 10, 10],
type: 'line',
order: 1
}],
labels: ['January', 'February', 'March', 'April']
},
options: options
});
Example 2: chart . js bar
new Chart(document.getElementById("mixed-chart"), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408,547,675,734],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "#3e95cd",
data: [133,221,783,2478],
fill: false
}, {
label: "Europe",
type: "bar",
backgroundColor: "rgba(0,0,0,0.2)",
data: [408,547,675,734],
}, {
label: "Africa",
type: "bar",
backgroundColor: "rgba(0,0,0,0.2)",
backgroundColorHover: "#3e95cd",
data: [133,221,783,2478]
}
]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa'
},
legend: { display: false }
}
});
Example 3: chartjs horizontal bar data in front
options: {
responsive: true,
maintainAspectRatio: false,
hover: {
animationDuration: 0
},
animation: {
duration: 1,
onComplete: function() {
let chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i)
{
let meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
let data = dataset.data[index];
ctx.fillText(data, bar._model.x + 15 , bar._model.y + 5);
});
});
}
}
},