JSFiddle - React, Tailwind, and code Playground
by Chase Wilson
HTML
<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
<canvas id="stacked"></canvas>
CSS
#chart {
height: 300px;
width: 500px;
}
JavaScript
let chart = document.getElementById('chart');
console.log(chart)
var mixedChart = new Chart(chart, {
type: 'bar',
data: {
datasets: [{
label: '18.1.4.4+',
data: [1.6, 2.57, 5.58, 9.3, 11.94, 16.83],
backgroundColor: '#00A2D5',
animation: false
}, {
label: 'Target',
data: [5, 10, 15, 30, 55, 75],
backgroundColor: '#F5A700',
type: 'line',
fill: false,
showLine: false,
pointRadius: 10,
elements: {
point: {
pointStyle: 'line'
}
}
}],
labels: ['2/8/19', '2/15/19', '2/22/19', '3/1/19','3/8/19','3/15/19']
},
options: {
fill: false,
animation: false
}
});
let barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 3',
backgroundColor: window.chartColors.green,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};
let ctx = document.getElementById('stacked').getContext('2d');
let myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
...