Scatter + Line chart on the same plot #6409
Description
Documentation Is:
- Missing or needed
- Confusing
- Not Sure?
Please Explain in Detail...
I do not understand how to put scatter + line chart on the same plot (mixed chart). I have read about a potential solution on your forum, that suggests using both line charts but switching off the line for the second. This will not work if you intent the scatter points to take the intermediate values in the x-axes. What do I mean by that? Suppose your line chart has x data points at x=2 and x=3. Now if you specify your scatter plot's x at 2.5, the point gets moved to x=2 on the chart. Javascript code example is below.
Your Proposal for Changes
No clue how this lib works.
Example
var ctx = document.getElementById('curve').getContext('2d');
var grd = ctx.createLinearGradient(0, 600, 0, 0)
grd.addColorStop(0, "rgba(36, 11, 54, 0)")
grd.addColorStop(1, "rgba(195, 20, 50, 0")
let x = [0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 4.0, 5.0, 6.0, 10.0];
let y = [0.2, 0.3, 0.2, 0.5, 0.6, 0.6, 0.8, 0.5, 1.0, 1.5];
let options = {
layout: {
padding: {
left: 50,
right: 50
}
},
animation: {
easing: 'easeInQuad'
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
}
}
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: x,
datasets: [{
label: 'Curve',
backgroundColor: grd,
borderColor: 'rgba(0, 0, 0, 0.6)',
data: y,
},
{
label: 'Scatter Dataset',
backgroundColor: 'black',
data: [{
x: 1.49,
y: 0.1
}, {
x: 5.0,
y: 3.0
}, {
x: 15.0,
y: 3.0
}],
showLine: false,
type: 'scatter'
}
]
},
options: options
});