Multiple Series - error 18

[webwizard]

I'm trying to add a second series/y axis to my chart, this happens on an event basis and will not be at the first render like this:viewtopic.php?t=42947.

However I get an error 18 which is an invalid yAxis.

The way I try to do it is this way:

Here I set the axis

Code: Select all

testChart.value.addAxis({
        id: 'testAxis',
        min: lowestComparedY.y,
        offset: 25,
        type: props.dataset?.options?.yAxis?.type ?? 'linear',
        opposite: true,
        gridLineColor: cookieGet("theme") === "light" ? "#d1d5db" : "#374151",
    }, false);

Here I set the series:

Code: Select all

    testChart.value.addSeries({
        yAxis: 'testAxis',
        data: {
            name: `Price '${props.dataset.comparedAsset.symbol}'`,
            yAxis: 1,
            turboThreshold: newData.length,
            threshold: Number(newData.y),
            boostThreshold: 1,
            data: newData,
            color: '#f0ba19',
            states: {
                hover: {
                    enabled: true,
                    lineWidth: 2,
                },
            },
        }
    })

However when I trigger the code I get the error, it looks like the axis are rendered because the chart changes, but for some reason it does not understand which yAxis the addSeries are being added to?

[kamil.k]

Hello webwizard,

Thanks for contacting us again!

I've prepared an example of adding a new y-axis as well as the series, take a look: https://jsfiddle.net/BlackLabel/ox3bfdp4/. I've based it on your code so take note of the series structure which in your example is incorrect, you shouldn't define all the properties inside the series.data but one level above (just on the series) and leave the data property only as the array of values.

I assume that the above issue isn't causing the error and as there are too many related things that can cause it, it would be much helpful if you reproduce this issue in an online editor (the codesandbox would be fine for React) then I will be able to directly debug this and help you better.

Looking forward to your response,
Kind Regards!

[webwizard]

Hello webwizard,

Thanks for contacting us again!

I've prepared an example of adding a new y-axis as well as the series, take a look: https://jsfiddle.net/BlackLabel/ox3bfdp4/. I've based it on your code so take note of the series structure which in your example is incorrect, you shouldn't define all the properties inside the series.data but one level above (just on the series) and leave the data property only as the array of values.

I assume that the above issue isn't causing the error and as there are too many related things that can cause it, it would be much helpful if you reproduce this issue in an online editor (the codesandbox would be fine for React) then I will be able to directly debug this and help you better.

Looking forward to your response,
Kind Regards!

Thanks for replying, it does however still not render
The same dataset work (currently on the live site www.bitculator.com) when I use the highcharts-vue library for the options API..

Code: Select all

    testChart.value?.addAxis({
        id: axisID,
        min: newData.reduce(function (prev, curr) {
            return prev.y < curr.y ? prev : curr;
        }).y,
        offset: 25,
        type: props.dataset?.options?.yAxis?.type ?? 'linear',
        opposite: true,
        gridLineColor: cookieGet("theme") === "light" ? "#d1d5db" : "#374151",
    }, false);

    testChart.value?.addSeries({
        yAxis: axisID,
        type: 'area',
        name: `Price '${props.dataset.comparedAsset.symbol}'`,
        turboThreshold: newData.length,
        threshold: Number(newData.y),
        boostThreshold: 1,
        data: newData,
        color: '#f0ba19',
        states: {
            hover: {
                enabled: true,
                lineWidth: 2,
            },
        },
    });

I have put the sample on a live web server on www.rateababe.com (I know, it's a domain I've had since I was a teenager... lulz)

Go to BItcoin, scroll down to the chart, search for Ethereum and pick Ethereum, the yAxis will update but the dataset won't and I will get that error 18

[webwizard]

It does not give me the same error on the live server, maybe because its build for production, but basically that's the error I get on my local development env

[webwizard]

Hello webwizard,

Thanks for contacting us again!

I've prepared an example of adding a new y-axis as well as the series, take a look: https://jsfiddle.net/BlackLabel/ox3bfdp4/. I've based it on your code so take note of the series structure which in your example is incorrect, you shouldn't define all the properties inside the series.data but one level above (just on the series) and leave the data property only as the array of values.

I assume that the above issue isn't causing the error and as there are too many related things that can cause it, it would be much helpful if you reproduce this issue in an online editor (the codesandbox would be fine for React) then I will be able to directly debug this and help you better.

Looking forward to your response,
Kind Regards!

I figured out why yours works and mine do not...

Im using Highcharts.stockChart to initliaze the chart..

You are using Highcharts.chart

If I switch back to that, it will render, however I need the zoom range at the bottom, which will disappear if I do the Highcharts.chart init

[kamil.k]

Thanks for your examples but unfortunately they don't tell me much as I don't see the code so it still would be much helpful if you reproduce this issue in an online editor. Are you sure that the testChart.value property exists and new axis is being added correctly to the chart? It looks like this causes the issue. Have you also tried checking if the new axis exists before adding the series?

The environment shouldn't influence this case as well as the use of stock. Please, take a look at the same implementation but with the mentioned stock chart: https://jsfiddle.net/BlackLabel/rxj8atns/

Regards!

[webwizard]

Thanks for your examples but unfortunately they don't tell me much as I don't see the code so it still would be much helpful if you reproduce this issue in an online editor. Are you sure that the testChart.value property exists and new axis is being added correctly to the chart? It looks like this causes the issue. Have you also tried checking if the new axis exists before adding the series?

The environment shouldn't influence this case as well as the use of stock. Please, take a look at the same implementation but with the mentioned stock chart: https://jsfiddle.net/BlackLabel/rxj8atns/

Regards!

If you look in the console you will be able to see all the data that you need, like:

1# What object i am using I'm the addAxis
2# The two axes
3# What object i am using in the addSeries
4# Which dataset i am using in the 3# addSeries


https://imgur.com/a/dhQbNpD

it does have the second axis, and you can see the dataset which are being added too?

You can even see that the axis I'm targeting does have the name which the addSeries is trying to target

Im trying to find a way to create a fiddle... however Im thinking about ditching the feature as this is a complex example, and the vue fiddles out there are really not that good to make complex examples in....

[webwizard]

Thanks for your examples but unfortunately they don't tell me much as I don't see the code so it still would be much helpful if you reproduce this issue in an online editor. Are you sure that the testChart.value property exists and new axis is being added correctly to the chart? It looks like this causes the issue. Have you also tried checking if the new axis exists before adding the series?

The environment shouldn't influence this case as well as the use of stock. Please, take a look at the same implementation but with the mentioned stock chart: https://jsfiddle.net/BlackLabel/rxj8atns/

Regards!

Im so sorry, I'm a fool.

I were using pop above the code where I do the addAxis/addSeries.. i forgot how JS sometimes work, I'm doing that in an async await now, and it work great, sorry for taking up your time, I feel so dumb

[kamil.k]

No worries, that's great you found the solution!

In case of any other questions, feel free to contact us anytime.