CODEWITHSUNDEEP
javascriptcsshighchartsborder
Tal C
Tal C

Reputation: 567

Highcharts border curve inside

I'm trying to get highcharts top border to curve inside as such enter image description here

on a column/cylinder like below. I tried to play around with the 

borderRadius

in the css but nothing really worked for me, the closes I got was something like this which is not an option enter image description here

jsfiddle is here for cyllinder

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/cylinder/

and here for column. Both are fine for my use case. https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-borderradius/

Upvotes: 0

Views: 107

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

That is not possible by using defualt Highcharts API, but there is a possibility to add an extension by wrapping prototype functions. You can wrap drawPoints method to change column shape type from rect to path with curved top border.

(function(H) {
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
        this.points.forEach(function(point) {
            var sArgs = point.shapeArgs;
            point.shapeType = 'path';
            point.shapeArgs = {
                'd': [
                    'M', sArgs.x, sArgs.y,
                    'Q', sArgs.x + sArgs.width / 2,
                    sArgs.y + sArgs.width / 2,
                    sArgs.x + sArgs.width, sArgs.y,
                    'L', sArgs.x + sArgs.width, sArgs.y + sArgs.height,
                    sArgs.x, sArgs.y + sArgs.height, 'z'
                ]
            }
        });

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

Live demo: http://jsfiddle.net/BlackLabel/as6y1uhn/

API Reference: https://api.highcharts.com/class-reference/Highcharts#.wrap

Docs: https://www.highcharts.com/docs/extending-highcharts

Upvotes: 1

Related Questions