javascripthighcharts

Highcharts arearange chart: Get plotLow and plotHigh in custom render function


I am building an arearange chart that uses a custom render function to draw a rectangle connecting the high and low markers for a data point, as shown for point "d" below: enter image description here

My render function looks like this:

Highcharts.chart("container", {
    chart: {
        events: {
            render() {
                const chart = this;
                const point = chart.series[0].points[3];
                const rectWidth = 8;

                const lowPos = point.pos(true, point.plotLow);
                const highPos = point.pos(true, point.plotHigh);

                if (!chart.customSVG) {
                    chart.customSVG = chart.renderer
                        .rect()
                        .attr({ fill: "#008d80" })
                        .add();
                }
                
                chart.customSVG.attr({
                    x: lowPos[0] - (rectWidth / 2),
                    y: highPos[1],
                    width: rectWidth,
                    height: lowPos[1] - highPos[1],
                });
            }
        }
    }
})

My question is about these two lines of code:

const lowPos = point.pos(true, point.plotLow);
const highPos = point.pos(true, point.plotHigh);

Unlike the plotY member of the Point class, the plotLow and plotHigh members are undocumented and not included in the TypeScript definition. However, the code seems to work fine. So is there a documented "right" way to do this, or should the docs and TypeScript definition be updated to include plotLow and plotHigh?

CodePen that generates the chart shown above: https://codepen.io/RandScullard/pen/YPyYvea


Solution

  • You're correct. They're not documented as they're the internal properties used by HC's range-type series (like your arearange).

    You can safely use them as there are no other properties that store pixel positions of low and high values. If you write your code in TS feel free to extend the Point interface to include these properties, to avoid type errors. You can also report it on the HC GH to suggest documenting and typing these properties: https://github.com/highcharts/highcharts/issues