princ09
Posts: 1
Joined: Tue Feb 20, 2024 12:36 pm

Gradient Timeline chart

Hi All, Thanks for this amazing library. We recently purchases the API for it.
I am referring [this codepen][https://www.highcharts.com/samples/high ... is?codepen]. I understand that
1. dataLabels.format can accept html to customize tooltip
2. I can use data url for custom marker.

But I couldn't find the way to customize timeline bar and connector. I would like to have gradient bar and dashed connector.
Please check the attachment for bar I need.
[GradientBar][https://ibb.co/9yTnYMw]
Any reference will be appreciated. Thanks
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Gradient Timeline chart

Hello and welcome to our forum!

This can be achieved, however, not using the basic API. You need to use the chart.events.render() callback function to modify these elements accordingly.

Adding style to your connectors is relatively easy, just iterate through each point and add the stroke-dasharray attribute to each dataLabels connector:

Code: Select all

const chart = this,
  series = chart.series[0],
  points = series.points,

points.forEach(point => {
  point.dataLabel.connector.attr({
    'stroke-dasharray': '8,6'
  })
});
In the case of the timeline bar it is a bit more complicated. Because it is a thin path with stroke, you cannot add a gradient to it. Therefore, you can hide it and draw a rectangle in its place using SVGRenderer:

Code: Select all

const chart = this,
  series = chart.series[0],
  timelineBar = series.graph;

timelineBar.attr({
  'stroke-width': 0,
  fill: 'none',
  stroke: 'none'
});

if(!timelineBar.custom) {
  timelineBar.custom = chart.renderer.rect().attr({
    fill: 'url(#gradient)',
    zIndex: 1
  }).add();
}
const bBox = timelineBar.getBBox(),
  height = 2,
  width = bBox.width + height * 2,
  x = bBox.x + chart.plotLeft - height / 2,
  y = bBox.y + chart.plotTop - height / 2;

timelineBar.custom.attr({
  x,
  y,
  width,
  height
})

And to add the appropriate gradient to it, you need to create its definition, for example in HTML:

Code: Select all

<svg style="height: 0">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="50%" stop-color="yellow"></stop>
      <stop offset="100%" stop-color="green"></stop>
    </linearGradient>
  </defs>
</svg>

Demo: https://jsfiddle.net/BlackLabel/s5xpdm9h/
Gradients Docs: https://www.highcharts.com/docs/chart-d ... d-patterns
API: https://api.highcharts.com/highcharts/c ... nts.render
https://api.highcharts.com/class-refere ... VGRenderer
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”