How to get grid position in React Highcharts

Question

Is there a way to get the xPosition of the highcharts-grid or get its distance from the Highchart xPosition?

I would like to align an Element in my page to the actual grid. The problem is that the yAxis info size changes.

See the following examples:

and:

Can you show examples of the element you are trying to align to the grid? In my experience, it's quite difficult to align other elements with highcharts elements — Finbarr O'B, Jul 26 '17 at 08:27
I would like to put an amchart above it and keep their xAxis aligned — Asaf Pinhassi, Jul 26 '17 at 08:34

score 1 · Accepted Answer · answered Jul 26 '17 at 15:43

1

The x start position of plot area can be found in the chart.plotLeft property, so you do not have set fixed margins.

API Reference:
http://api.highcharts.com/highcharts/chart.margin

Example:
http://jsfiddle.net/tcuthdra/

answered Jul 26 '17 at 15:43

pawel_d

3,061
1
8
13

sorry but I couldn't find plotLeft in the API. The API Reference you supplied is how to set margins, not how to get the dynamically calculated ones. – Asaf Pinhassi Jul 27 '17 at 14:57
The plotLeft is not documented in the API, but it takes the same value as marginLeft (the distance between the left outer edge of the chart and the plot area), so that is why I posted reference to it. Take a look at the example I posted in my answer. If margin is not specified, the distance recalculates each time you toggle legend item (open console and take a look at the values coming from the redraw event). – pawel_d Jul 28 '17 at 14:56

score 0 · Answer 2 · answered Jul 26 '17 at 09:04

You should start by setting the margins for your chart, this will override some of the automatic calculations done by highcharts that make the xAxis reflow when you deselect a series. I did a simple jsfiddle trying to mimic your chart style above, see here: http://jsfiddle.net/p6bog3pa/

The Chart config object is:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        margin: [25, 15, 70, 400] // This fixes the chart margins
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
      column: {
        grouping: true
      }
    },
    yAxis: [
    { title: { text: 'hello title' }},
    {   title: { text: 'highcharts title' }},
    {   title: { text: 'stuff title' }}],
    series: [{
        name: 'hello',
        yAxis: 0,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'highcharts',
        yAxis: 1,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'stuff',
        yAxis: 2,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

And since you have fixed margins, you can set fixed offsets for any component you wish to align with the chart x-axis. Of course, if you want to make it more dynamic, then there will be more work in your code to determine the appropriate margins, but this shouldn't be too difficult a task.

Nice, but how would you decide the left margin width? Look at the two bottom examples - how would you know the required margin width in both cases? My chart can sometimes have values like 1,2,3 and on other cases 0.000003. How would you set the width accordingly? — Asaf Pinhassi, Jul 26 '17 at 09:26
I see, so you have some lengthy values that need to display in the yAxis tick labels.. That would be more tricky to accomodate indeed, if you don't want tick labels overflowing and being turned to ellipsis or overlapping other parts of the axis labels. There are a few options you have, maybe use rotation on the label so that it is rotated at an angle and requires less width in the margin, or disallow decimal values so only integers show. This is really all about styling the yAxis. Jsfiddle and api docs from highcharts are your best friend, here. http://api.highcharts.com/highcharts/yAxis — Finbarr O'B, Jul 26 '17 at 09:40

score 0 · Answer 3 · answered Jul 27 '17 at 14:46

My solution was to find one of Highchart's inside elemnts, find its distance from the left of the window and move my own element accordingly.

Apparently, the chart xAxis element is the first with classname highcharts-axisand its top left corner is suitable for what I needed:

   const highchartInsideElement = document.getElementsByClassName("highcharts-axis");
    const myElement = document.getElementById("myElement");

    if (analCharts.length > 0) {
        const highchartInsideElementTopLeft = this.getPageTopLeft(highchartInsideElement[0]).left;
        const myElementTopLeft = this.getPageTopLeft(ganttWrapper).left;

        padding = `${highchartInsideElementTopLeft - myElementTopLeft + 16}px`; // 16: cheating in order to match Highcharts extra x values

        myElement.style.paddingLeft = amchartsWrapperMargin;

    }

To get distance from window left:

    getPageTopLeft(el) {
    const rect = el.getBoundingClientRect();
    const docEl = document.documentElement;
    return {
        left: rect.left + (window.pageXOffset || docEl.scrollLeft || 0),
        top: rect.top + (window.pageYOffset || docEl.scrollTop || 0)
    };
}

How to get grid position in React Highcharts

3 Answers3