2👍
✅
1) Here is an example for how to only show the line and not the fill below. Basically, you just use the fill: false
option.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:
[0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
datasets: [{
label: 'Dataset 1',
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Drsw Line on Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
}
});
2) There is nothing natively built into chart.js to draw lines on the chart, however the same team has created a nice plugin called chartjs-plugin-annotation that you can use to do this. Here is an example of how to configure a line at the point that you wanted (this would go inside your options
config.
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2225,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label: {
enabled: true,
content: 'Point Label',
yAdjust: -16,
}
}]
}
Here is a codepen example that demonstrates this.
1👍
1) Try adding datasets:
fill: false,
to your dataset
2)Not sure this is possible
This would be a comment but i can’t comment yet.
Source:stackexchange.com