JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
JavaScript
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["januar", "desember", "november", "oktober", "september", "august", "juli", "juni", "mai", "april", "mars", "februar"],
datasets: [{
fill: true,
lineTension: 0.1,
backgroundColor: "#f9f9f9",
borderColor: "#72bce3",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [2, 4, 2, 1, 2, 4, 2, 1, 2, 4, 2, 1],
spanGaps: true
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: function(tick, index, array) {
return (index % 3) ? "" : tick;
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});