highchartsflagstimeline

Higcharts - timeline series type- continuous color with datetime x axis

i would like to have something like a 'timeline' chart with a label/tooltip mixed with other series type like 'line'.
I have a datatipe like a 'flag' that is very repetitive so I would like to "extend the flag for the same value".
So I suppose 'timeline' series type BUT when the x axis is setted as 'datetime' the timeline series stopped to be a bar and begin to be a "point".
But with 'timeline' and x axis setted as 'datetime' the rectangle are not sized in a continuous way.
I would like something like this (as you can see I'm not a grafic designer)
desired

but this is what I obtain
enter image description here



Suggestions?

Solution

  • You can add xrange series:

      series: [{
    type: 'line',
    data: [...]
  }, {
    type: 'line',
    data: [...]
  }, {
    type: 'xrange',
    data: [...]
  }]

    Live demo: https://jsfiddle.net/BlackLabel/5hkcLn7v/

    Docs: https://www.highcharts.com/docs/chart-and-series-types/x-range-series