Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<!-- https://github.com/google/palette.js -->
<script src="../../palette.js/palette.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<script>
// get palette from palette.js
var pal = palette('cb-BuGn', 8 );
var ctx = document.getElementById("myChart").getContext("2d");
Chart.defaults.global.elements.line.fill = false;
Chart.defaults.global.elements.line.tension = 0;
Chart.defaults.global.animation = 0;
var myChart = new Chart(
ctx,
{
type: 'line',
data: {
labels: [ "Day1", "Day2", "Day3" ],
datasets: [
{
label: "1st Line Chart",
data: [ 27, 33, 49 ],
borderColor: '#' + pal[3],
backgroundColor: '#' + pal[3],
pointRadius: 8,
pointStyle: 'star',
pointBorderWidth: 2,
},
{
label: "2nd Line Chart",
data: [ 10, 50, 22 ],
borderDash: [ 5, 10],
borderColor: '#' + pal[4],
backgroundColor: '#' + pal[4],
pointRadius: 8,
pointStyle: 'triangle',
pointBorderWidth: 2,
}
]
},
options: {
responsive: true,
legend: {
position: 'bottom',
lineWidth: 0,
labels: {
fontSize: 12,
boxWidth: 12,
usePointStyle: true,
generateLabels: function(chart){
return chart.data.datasets.map( function( dataset, i ){
return {
text: dataset.label,
fillStyle: dataset.backgroundColor,
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: [],
lineDashOffset: 0,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.pointBorderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
datasetIndex: i // extra data used for toggling the datasets
};
})
}
}
},
title: {
display: true,
text: 'Multi Line Chart'
},
scales: {
yAxes: [
{
ticks: {
min: 0
},
scaleLabel: {
display: true,
labelString: "Values"
}
}
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Date"
}
}
],
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.