Disabling y-axis values for a graph dataset

[PercivalFigaro]

Hello!

I would like to use a single graph for displaying different data types. The x-axis is a time cartesian axis. Some of those data types have values to be displayed on the y-axis, but some should only be placed on the graph in regards to the time axis (e.g. display a straight line).

Is there a clean way to do this?

[stockiNail]

The first answer coming in my mind is to use more axes and relate them to the datasets. But do you a sample to understand better what you need?

[PercivalFigaro]

Lets say I have a line chart with two lines.

The points of the first line have numeric values for the y-axis and time values for the x-axis.
The points of the second line don't have numeric values, but the points do have time values, so the line can be placed on the x-axis.

[stockiNail]

if have understood well,

• Dataset1: x: time, y: numbers
• Dataset2: x: time, y: time (or which kind of data?)

I think you could add a axis (i.e. y1) and assign it to the dataset 2 by yAxisID: 'y1' in your dataset config. Then axis y1 should be defined in options.scales, with display: false in order do not show it.

But I'm not sure if I understood well your use case.

[PercivalFigaro]

For dataset 2, I would like to display nothing on the Y axis, but rather display various information about certain points in time inside the tooltip of those points in time on hover.

So I would just like to place dataset 2 somewhere in the middle on the same graph as a straight line, because it shares the time dimension, but doesn't have any Y-values.

[stockiNail]

In this case the easiest thing is do not show the dataset 2 (with meta data) setting some style properties to hide it.

See my example:

  type: 'line',
  data: {
    datasets: [{
      label: 'Visible',
      data: data1, // with Y values
     }, {
      label: 'Invisible',
      type: 'scatter', // scatter is used because it draws only point and setting radius to 0, they will not be drawn
      radius: 0, // this hides the dataset but it will be added on tooltip
      data: data2 // with all Y values set to whatever value.
     }]
  },

See codepen: https://codepen.io/stockinail/pen/abRRVKd

I don't known exactly how your data will look like but maybe there could be other solutions (and more elegant) having these info.
Let me know if this is addressing your use case.