Chart with multiple series displayed incorrectly [React]

[mwint]

Hi

I'm trying to create a Component that takes charts and chartHeight as props, and returns a Highstock Chart with multiple series based on the given props.charts array.

When I create the options for the chart like so:

Code: Select all

setChartOptions({
        chart: {
            height: (props.charts.length) * props.chartHeight,
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Title'
        },
        rangeSelector: {
            selected: 0,
            buttons: [],
            inputEnabled: false
        },
        tooltip: {
            split: true
        },
        series: buildSeries(),
        yAxis: buildYAxis()
    })

Using the functions buildSeries and buildYAxis:

Code: Select all

const buildSeries = () => {
    let series = [];

    props.charts.forEach((chart, index) => {
        series.push({
            type: chart.type,
            name: chart.title,
            data: chart.data,
            yAxis: index,
            color: chart.color
        })
    })

    return series;
}

const buildYAxis = () => {
    let yAxis = [];

    props.charts.forEach((chart, index) => {
        yAxis.push({
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: chart.title,
            },
            height: props.chartHeight,
            top: index * props.chartHeight,
            lineWidth: 2,
            resize: {
                enabled: true
            },
            offset: 0
        })
    })

    return yAxis;
}

The first chart is displayed behind the Navigator and the rest of the charts are displayed correctly.
When I paste the return value of buildSeries() and buildYAxis() instead of calling the functions, the chart is displayed correctly as well.
I'm following this example to build my chart: https://www.highcharts.com/demo/stock/c ... and-volume
What am I missing here?
If there's more information needed please let me know

[sebastian.h]

Hi,
We appreciate you reaching out to us.

In our React wrapper, you will find information on how to the optimal way to update.
This approach base on with setState and using chart.update method.
https://github.com/highcharts/highchart ... -to-update

Let me know how are you going with this.
Best regards.

[mwint]

Hi,

Thanks for replying.
I managed to create an example of my code and it seems to be functioning exactly like I would expect:
https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

But copying the exact same implementation onto my project still shows the first chart behind the navigator, while the rest are displayed as inteded.

[sebastian.h]

Hi,
Thanks for example.

I try to replicate your problem, could you explain what do you mean:

"...the first chart behind the navigator, while the rest are displayed as inteded.'

Do you have any errors in the console, you have the same version of dependencies in yours environment?

Best regards.

[mwint]

Hi,

I don't have any errors in the console.
I'm attaching a screenshot of my issue here.
As you'll be able to see, series named Valve 2 & Valve 3 appear as intended, while the first choice named Valve 1 appears behind the navigator.
You can also see the blank space intended for another series to appear in.

[sebastian.h]

Hi,
Thanks for the detailed information.

Sorry, I can't replicate your problem, I suggest using Highcharts.Chart#addSeries to add new series.
The idea is to only add a new series with other chart parameters already saved.

https://api.highcharts.com/class-refere ... #addSeries
https://jsfiddle.net/gh/get/library/pur ... addseries/

Best regards.

[mwint]

That seems like a good solution, but it adds more series to the same yAxis. In my example, I added both a yAxis object and a Series object. That's because I want each series to have it's own axis. Can something like that be achieved using Highcharts.Chart#addSeries?

[sebastian.h]

Hi,

There is method Highcharts.Chart#addAxis for add axis tochart working in a similar way like method Highcharts.Chart#addSeries.
https://api.highcharts.com/class-refere ... t#addAxis

Demo how to add an axis to chart:
https://jsfiddle.net/gh/get/library/pur ... t-addaxis/

Important information, if you loading data synchronically, use another approach.

"...Note that this method should never be used when adding data synchronously at chart render time, as it adds expense to the calculations and rendering. When adding data at the same time as the chart is initialized, add the axis as a configuration option instead."

Best regards.