Scatter chart hides data points that have the same x value

[hkumar1993]

In a recent project a scatter plot only showed 3 out of 5 data points,

{ x: 0.1, y: 30 },
{ x: 0.1, y: 20 },
{ x: 0.2, y: 0 },
{ x: 0.1, y: 0 },
{ x: 0.15, y: 20 },

The points that were not displayed had the x value in common ( 0.1 ). The y values were all different but the only one displayed was y: 30

[lukwallace]

There's a fix for this. Use the field dataKey. It's not specified anywhere in the docs tho.

[lukwallace]

Additional clarification regarding the dataKey flag --

For whatever reason, Contour defaults to using the x values of the dataset as the unique identifier when it comes to the scatter chart, we can change this by adding in a dataKey option to the Contour chart instance, e.g.,

this.chart = new Contour({
    el: 'my-scatter-chart',
    scatter: { dataKey: 'id' },
})
    .cartesian()
    .scatter(data)
    .render();

Essentially, this will let Contour know to consider the data unique by a key: id; applying this to the dataset raised in the issue should then fix the problem:

const data = [
    { id: 1, x: 0.1, y: 30 },
    { id: 2, x: 0.1, y: 20 },
    { id: 3, x: 0.2, y: 0 },
    { id: 4, x: 0.1, y: 0 },
    { id: 5, x: 0.15, y: 20 },
];

---

Alternatively, there is another method to get Contour's scatter chart to recognize your dataset as separate series without using dataKey. If you provide it in the format that makes it clear that this is the case:

const data = [
    { name: 'series-1', data: [{ x: 0.1, y: 30 }] },
    { name: 'series-2', data: [{ x: 0.1, y: 20 }] },
    { name: 'series-3', data: [{ x: 0.2, y: 0 }] },
    { name: 'series-4', data: [{ x: 0.1, y: 0 }] },
    { name: 'series-5', data: [{ x: 0.15, y: 20 }] },
];