Skip to content

Instantly share code, notes, and snippets.

@four4to6 four4to6/chart_js_line_charts.js Secret
Last active Nov 3, 2019

Embed
What would you like to do?
Chart.js Line Charts Samples
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: ["Age: 0", "Age: 1", "Age: 2", "Age: 3", "Age: 4", ['Lunaの歳', 'Age: 5'], "Age: 6", ['Point', 'Age: 7'], "Age: 8", "Age: 9", "Age: 10"],
datasets: [{
label: "罹患率 (Morbidity)",
backgroundColor: "rgba(255, 99, 132, 0.3)",
borderColor: "rgb(255, 99, 132)",
pointHoverBackgroundColor: "rgb(225, 225, 225)",
pointHoverRadius: 10,
pointRadius: [3, 4, 6, 8, 10, 20, 10, 20, 9, 12, 20],
data: [0.1, 0.3, 0.4, 0.6, 0.9, 1, 0.9, 1.8, 1.5, 1.8, 2.6],
fill: true
}]
},
plugins: [{
afterDatasetsDraw: function (d, h) {
var f = d.getDatasetMeta(0);
var e = f.data;
var a = e[7]._model.x;
var g = e[7]._yScale.top;
var c = e[7]._yScale.bottom;
var b = d.chart.ctx;
b.beginPath();
b.lineWidth = 2;
b.strokeStyle = "#008edd";
b.moveTo(a, g);
b.lineTo(a, c);
b.stroke()
}
}],
options: {
tooltips: {
backgroundColor: 'rgba(43, 8, 169, 0.7)'
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: "腎臓病発病率の年齢推移"
},
legend: {
position: "top"
},
scales: {
xAxes: [{
gridLines: {
color: "lightgray"
},
ticks: {
beginAtZero: true
},
display: true,
scaleLabel: {
display: true,
labelString: "年齢 (Age)"
}
}],
yAxes: [{
gridLines: {
color: ['gray', 'red', 'orange', 'yellow', 'green', 'pink'],
zeroLineColor: "black"
},
ticks: {
beginAtZero: true,
stepSize: 0.5,
userCallback: function (tick) {
return tick.toString() + '%';
}
},
display: true,
scaleLabel: {
display: true,
labelString: "Morbidity (%)"
}
}]
}
}
});
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.