Hi,
I am trying to determine the best way to show numeric and boolean time series data on the same graph, with a shared tooltip.
I have attached an example of what I'm trying to achieve.
Here is what I have so far (using React & Typescript):
https://stackblitz.com/edit/highcharts- ... tChart.tsx
I'm trying to keep the numeric and boolean data separate, so I've simply split the chart in half for now.
The numeric series on the top and the boolean on the bottom.
The numeric data is straightforward.
I'm using a line series per numeric trend, on a single y-axis.
The boolean data is where I'm having difficulties.
As per the example screenshot, I'm trying to show a continuous bar for each boolean trend.
True periods are represented with a solid colour and false periods represented with a faded colour.
From reviewing the documentation, the most suitable series type seems to be xrange.
I have used a single xrange series for all boolean trends and given each trend its own category on a dedicated boolean y-axis.
The shared tooltip is an issue in the current implementation.
When hovering over the numeric portion of the chart, only the numeric series are shown in the tooltip and the boolean series is faded.
When hovering over a boolean point within the boolean series, only the specific boolean point is included in the tooltip and the numeric series values are those from the beginning of the boolean point.
The desired behaviour is as follows:
- the tooltip always follows the mouse (and crosshairs)
- the tooltip shows the values for all numeric and boolean trends at (or nearest to) the crosshairs
- the boolean series does not fade when the mouse isn't over it
My questions are as follows:
1. Are there more suitable approaches for this use case instead of trying to use xrange for boolean data?
2. Can you provide any suggestions on how to implement the tooltip so the desired behaviour is achieved?
Thanks in advance.