highcharts
Apply pattern to column chart in Highcharts
I want to apply arrow patterns to my chart, which involves a combination of stacked columns and column range types. I have experimented with various configurations but have been unable to achieve the exact appearance depicted in the image. Any assistance would be greatly appreciated.
Solution
Unfortunately, in Highcharts it is not possible to set columns to end with an arrow using basic API settings. You would have to modify the core code responsible for drawing the column.
However, arrows in the middle of columns can be obtained using SVG pattern fills. However, you must have a rigid chart width set because these patterns are relative to the entire chart, not a point, so they will move when you change the width:
color: {
pattern: {
color: 'blue',
path: {
d: 'M 0 0 L 25 10 M 25 10 L 50 0',
strokeWidth: 1
},
width: 50,
height: 10,
x: 6
}
}