Skip to content

Instantly share code, notes, and snippets.

@katogiso

katogiso/chartjs_line_multi_index.html

Created August 27, 2016 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save katogiso/e8a0b37a33440081f34d4d8e0cbbf84c to your computer and use it in GitHub Desktop.
Save katogiso/e8a0b37a33440081f34d4d8e0cbbf84c to your computer and use it in GitHub Desktop.
Download ZIP
ChartJs Line Multi
Raw
chartjs_line_multi_index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<!-- https://github.com/google/palette.js -->
<script src="../../palette.js/palette.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></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],
},
{
label: "2nd Line Chart",
data: [ 10, 50, 22 ],
borderColor: '#' + pal[4],
backgroundColor: '#' + pal[4]
}
]
},
options: {
responsive: false,
legend: {
position: 'bottom',
},
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