Display Line Chart With Connected Dots Using Chartjs
I want to draw a chart like this using ChartJS. But I couldn't find a solution for connect first and last dots and show single unique dot inside that connected area. And also I nee
Solution 1:
You can create a scatter chart instead of line.
Here is an example :
var chart = newChart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{
x: 1,
y: 1
}, {
x: 3,
y: 7
}, {
x: 6,
y: 5
}, { // add same data as the first one, to draw the closing linex: 1,
y: 1
}],
borderColor: 'black',
borderWidth: 1,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}, {
data: [{
x: 3.5,
y: 4.5
}],
pointBackgroundColor: 'orange',
pointBorderColor: 'darkorange',
pointRadius: 10,
pointHoverRadius: 10
}]
},
options: {
legend: false,
tooltips: false,
scales: {
xAxes: [{
ticks: {
min: 0,
max: 10
},
gridLines: {
color: '#888',
drawOnChartArea: false
}
}],
yAxes: [{
ticks: {
min: 0,
max: 8,
padding: 10
},
gridLines: {
color: '#888',
drawOnChartArea: false
}
}]
}
}
});
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script><canvasid="ctx"></canvas>
Post a Comment for "Display Line Chart With Connected Dots Using Chartjs"