Hi,
As of now I'm putting border to a column that is applying completely all the sides, but i want to remove border of top and bottom of columns. Please help me to achieve this.
Apply only left and right border to columns in graphs
- Attachments
-
- whiteSpace.PNG (2.4 KiB) Viewed 578 times
Re: Apply only left and right border to columns in graphs
Hi there,
Highcharts are based purely on SVG, therefore on SVG elements properties like border-left, right, etc. do not exist.
But there is a 'hacky solution' for this one.
You can take a look at the Stack Overflow topic on how to add a partial stroke on SVG. I have also prepared a working demo for you, based on the SO solution.
First of all, you need to set a stroke on the rect element - for example in the CSS file, then manipulate the dashes breaks in JS, but to make it work, you have to turn off the chart.animation.
Stack Overflow: https://stackoverflow.com/questions/897 ... svg-shapes
DEMO: https://jsfiddle.net/BlackLabel/yrd1tzmu/
API Reference: https://api.highcharts.com/highcharts/chart.animation
If for some reason you would need to leave the chart.animation on, then I would suggest using Highcharts.SVGRenderer to render simple lines on columns that would act as a border.
https://api.highcharts.com/class-refere ... SVGElement
Do not hesitate to contact us in the future,
Best regards!
Highcharts are based purely on SVG, therefore on SVG elements properties like border-left, right, etc. do not exist.
But there is a 'hacky solution' for this one.
You can take a look at the Stack Overflow topic on how to add a partial stroke on SVG. I have also prepared a working demo for you, based on the SO solution.
First of all, you need to set a stroke on the rect element - for example in the CSS file, then manipulate the dashes breaks in JS, but to make it work, you have to turn off the chart.animation.
Stack Overflow: https://stackoverflow.com/questions/897 ... svg-shapes
DEMO: https://jsfiddle.net/BlackLabel/yrd1tzmu/
API Reference: https://api.highcharts.com/highcharts/chart.animation
If for some reason you would need to leave the chart.animation on, then I would suggest using Highcharts.SVGRenderer to render simple lines on columns that would act as a border.
https://api.highcharts.com/class-refere ... SVGElement
Do not hesitate to contact us in the future,
Best regards!
Kamil Musiałowski
Highcharts Developer
Highcharts Developer