JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
<canvas id="customer_chart" height="100"></canvas>
JavaScript
var ctx = document.getElementById('customer_chart').getContext('2d');
Chart.pluginService.register({
beforeInit: function(chart) {
// clones the dataset
var newdataset = jQuery.extend(true, {}, chart.config.data.datasets[0]);
chart.config.data.datasets[1] = newdataset;
for (var i = 0; i < chart.config.data.datasets[1].data.length; i++) {
// data * -1
chart.config.data.datasets[1].data[i] *= -1;
}
chart.config.data.datasets[1].label = "";
}
});
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['', 'Conference', 'Webinar', 'Trial'],
datasets: [{
label: 'Pipeline',
lineTension: 0.3,
data: [0, 10, 20, 15],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
],
}],
}
})
console.log(chart);