samb8s samb8s - 1 month ago 13
Javascript Question

Highcharts - change border of a single data point in series

I'm using highcharts to prepare some graphs. I'd like to be able to change the border colour of specific points in the series, but I can't get it to work (jsfiddle: http://jsfiddle.net/081e9sLy/4/)

I'm declaring my series as

var subject1 = [20,22,24,28,24, { marker: {
fillColor: 'green',
lineWidth: 3,
lineColor: "#f39c12"
}, y:29}];


but there is no orange border on the sixth data point. However, if I change the fillColor to "red", that does change the data point.

Any advice?

Edit: After further investigation it seems the border is visible (just!) when you mouseover the datapoint. But I need it to be visible always.

Answer

It seems to be a bug. lineWidth is not respected when it is defined in the point's marker options. It worked in version 4.2.7 http://jsfiddle.net/081e9sLy/7/

If you want to use it with version 5, you can try overwrite the Highcharts method with the below code.

Highcharts.seriesTypes.line.prototype.pointAttribs = function (point, state) {
var seriesMarkerOptions = this.options.marker,
                    seriesStateOptions,
                    pointOptions = point && point.options,
                    pointMarkerOptions = (pointOptions && pointOptions.marker) || {},
                    pointStateOptions,
                    strokeWidth = pointMarkerOptions.lineWidth || seriesMarkerOptions.lineWidth,
                    color = this.color,
                    pointColorOption = pointOptions && pointOptions.color,
                    pointColor = point && point.color,
                    zoneColor,
                    fill,
                    stroke,
                    zone;

                if (point && this.zones.length) {
                    zone = point.getZone();
                    if (zone && zone.color) {
                        zoneColor = zone.color;
                    }
                }

                color = pointColorOption || zoneColor || pointColor || color;
                fill = pointMarkerOptions.fillColor || seriesMarkerOptions.fillColor || color;
                stroke = pointMarkerOptions.lineColor || seriesMarkerOptions.lineColor || color;

                // Handle hover and select states
                if (state) {
                    seriesStateOptions = seriesMarkerOptions.states[state];
                    pointStateOptions = (pointMarkerOptions.states && pointMarkerOptions.states[state]) || {};
                    strokeWidth = pointStateOptions.lineWidth || seriesStateOptions.lineWidth || strokeWidth + seriesStateOptions.lineWidthPlus;
                    fill = pointStateOptions.fillColor || seriesStateOptions.fillColor || fill;
                    stroke = pointStateOptions.lineColor || seriesStateOptions.lineColor || stroke;
                }

                return {
                    'stroke': stroke,
                    'stroke-width': strokeWidth,
                    'fill': fill
                };

};

example: http://jsfiddle.net/081e9sLy/9/