Skip to content

Instantly share code, notes, and snippets.

@katogiso

katogiso/chartjs_line_pointstyle_index.html

Created August 31, 2016 11:51
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save katogiso/32e09c77a91d6417f7af402be9180890 to your computer and use it in GitHub Desktop.
Save katogiso/32e09c77a91d6417f7af402be9180890 to your computer and use it in GitHub Desktop.
Download ZIP
chartjs sample pointstyle
Raw
chartjs_line_pointstyle_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"></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'
},
{
label: "2nd Line Chart",
data: [ 10, 50, 22 ],
borderDash: [ 5, 10],
borderColor: '#' + pal[4],
backgroundColor: '#' + pal[4],
pointRadius: 8,
pointStyle: 'triangle'
}
]
},
options: {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontSize: 12,
boxWidth: 12,
usePointStyle: true,
}
},
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