chartjs master - mixed chart
by andig2
HTML
<script src="http://www.chartjs.org/dist/master/Chart.bundle.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var config = {
type: "bar",
options: {
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}, {
type: "time",
id: "axis-time",
display: false,
}, ],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
},
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
type: "line",
xAxisID: "axis-time",
fill: false,
backgroundColor: "#00b",
borderColor: "#00b",
data: [{
x: 0 * 3600,
y: 2124
}, {
x: 1.5 * 3600,
y: 12124
}, {
x: 2 * 3600,
y: 1636
}, {
x: 2.5 * 3600,
y: 11636
}, {
x: 3 * 3600,
y: 1057
}, {
x: 3.5 * 3600,
y: 11057
}, {
x: 4 * 3600,
y: 9433
}, {
x: 4.5 * 3600,
y: 19433
}, {
x: 5 * 3600,
y: 4512
}]
}, {
type: "bar",
xAxisID: "axis-bar",
fill: true,
backgroundColor: "#e91e63",
// borderColor: "#e91e63",
data: [21242, 16360, 10577, 94337, 45312, 35581, 5300]
}, ]
},
};
var chart = new Chart(canvas, config);