Highcharts bar chart rotated background pattern

Question

So I have multiple charts using the same color codes.

Most of them are stacked columns, but one of them is a bar chart.

The issue is that on this chart, all background patterns and gradients are 90deg rotated, which is clearly not what's expected.

Designed patterns + gradients

rotated backgrounds: gradient is left to right, and pattern has rotated angle

Any chance I can avoid this behavior? I'm aware I could redefine those with different angle, but that's not something I'd expect to have to implement at consumer level, isn't it?

Thanks

user_12171673 · Answer

To adjust the gradient in series you can a possibility to set options for gradient (linearGradient, stops) inside a color property.

color: {
  linearGradient: {
    x1: 0,
    y1: 0,
    x2: 1,
    y2: 1
  },
  stops: [
    [0, 'rgb(255, 255, 255)'],
    [1, 'rgb(200, 200, 255)']
  ]

},

https://api.highcharts.com/highcharts/series.column.color

https://www.highcharts.com/docs/chart-design-and-style/colors

Demo: https://jsfiddle.net/BlackLabel/r512tsdz/

Highcharts bar chart rotated background pattern

1 Answers