How to plot bars on a scatter chart?

[davejbur]

I have two data series, A and B. For both series, x represents distance, whilst y represents a force. I want to be able to plot the the force represented by series A as a bar, and the force represented by B as a point, but both points need to be at the correct distance along the x-axis (so a scatter chart is, I believe, the only way to go).

Something like this:

I have found here an answer on how to plot bars on a line chart, but, actually, that answers the opposite question, how to plot bars at irregular intervals on a regular interval line chart. I want to be able to plot bars as well as points at irregular intervals on an irregular interval scatter chart.

Any assistance or pointers gratefully received! Thanks.

[kurkle]

Both chart types support x,y (object) data.

https://www.chartjs.org/docs/latest/general/data-structures.html#object

The default x-scale is category, so that probably needs to be changed to linear or time, or you need to specify labels for the category scale to include the gaps.

[Udemology]

@davejbur data structures are useful to understand for this. I did notice that it was tricky to do without a clear example so I made an example based on kurkle reference, as there are 2 ways to do it: https://youtu.be/ehl1zcn6b9E

One way is based on scatter as leading which makes the X scale a linear scale.
The other is based on bar as leading which makes the X scale a category scale and we could use string values.

See if it is helpful for your case.

[davejbur]

Aha - got it, thanks!

For anyone else struggling, the key to it is the order in which you provide the datasets.

This doesn't work:

let scatterdata = 
[
  {x: ..., y: ...},
  {x: ..., y: ...},
...
];

let bardata = 
[
  {x: ..., y: ...},
  {x: ..., y: ...},
...
];

theChart = new Chart(ctx, 
{
  type: 'scatter',
  data: 
  {
    datasets: 
    [
      {
        type: 'bar',
        label: 'bar',
        backgroundColor: '#00ff00',
        borderColor: '#00ff00',
        fill: false,
        data: bardata
      },
      {
        type: 'scatter',
        label: 'scatter',
        backgroundColor: '#ff0000',
        borderColor: '#ff0000',
        fill: false,
        data: scatterdata
      }
    ]
  }
});

What you need to do is this (note that the scatter dataset is provided before the bar dataset in the chart):

let scatterdata = 
[
  {x: ..., y: ...},
  {x: ..., y: ...},
...
];

let bardata = 
[
  {x: ..., y: ...},
  {x: ..., y: ...},
...
];

theChart = new Chart(ctx, 
{
  type: 'scatter',
  data: 
  {
    datasets: 
    [
      {
        type: 'scatter',
        label: 'scatter',
        backgroundColor: '#ff0000',
        borderColor: '#ff0000',
        fill: false,
        data: scatterdata
      },
      {
        type: 'bar',
        label: 'bar',
        backgroundColor: '#00ff00',
        borderColor: '#00ff00',
        fill: false,
        data: bardata
      }
    ]
  }
});