Highcharts Error #18

[HachimDev]

Hi, so im getting this error when im trying the code for highstock here
the error is
Highcharts Error #18
The requested axis does not exist
This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.

here is my component :

import React, { Component } from "react";
import Highcharts from "highcharts/highstock";
import {
  HighchartsStockChart,
  Chart,
  withHighcharts,
  XAxis,
  YAxis,
  Title,
  Legend,
  AreaSplineSeries,
  SplineSeries,
  Navigator,
  RangeSelector,
  Tooltip
} from "react-jsx-highstock";
import { createRandomData } from "../utils/data-helpers";


class DemoChart extends Component {
  constructor(props) {
    super(props);

    const now = Date.now();
    this.state = {
      data1: createRandomData(now, 1e8),
      data2: createRandomData(now, 1e8)
    };
  }

  render() {
    return (
      <div>
        <HighchartsStockChart>
            <Chart zoomType="x" />
            <Title>First HighStock</Title>

            <Legend>
                <Legend.Title>Legend Title</Legend.Title>
            </Legend>

            <RangeSelector>
                <RangeSelector.Button count={1} type="day" >1d</RangeSelector.Button>
            </RangeSelector>

            <Tooltip />

            <XAxis>
                <XAxis.Title>XAxis Title</XAxis.Title>
            </XAxis>
            <YAxis id="price" >
                <YAxis.Title>Price</YAxis.Title>
                <SplineSeries id="profit" name="Profit" data={this.state.data1} />
            </YAxis>

            <Navigator>
                <Navigator.Series seriesId="profit" />
            </Navigator>
        </HighchartsStockChart>
      </div>
    );
  }
}

export default withHighcharts(DemoChart, Highcharts);

https://jsfiddle.net/gmw3odsq/
im fearly new to HighChart. thanks for the help

[whawker]

Hi @HachimDev, I think the problem here is with

import { createRandomData } from "../utils/data-helpers";

I haven't actually exported that helper as part of the React JSX Highcharts npm package (note the relative link), as it was just for use in examples

In this example I have inserted the missing functions into the code, and everything seems to be working for me?

[HachimDev]

Hi @whawker , i have added the folder utils to my demo project and it doesnt work.
thank you for the example but it still doesnt work for me.
I have to say that the first highchart example works fine for me.
so i guess the problem is with my package.json.
Any suggestions ?

{
  "name": "highchartapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "highcharts": "^5.0.0",
    "prop-types": "^15.6.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-jsx-highstock": "^2.0.1",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[HachimDev]

Yeah after comparing my dependencies to yours in your example i figgured out that i needed highcharts@6.0.0
that was the problem.
now it works fine !

[whawker]

Hmm that's odd! Seems to work fine even with 5.x.x for me. But if you're happy, feel free to close this issue.

[HachimDev]

thank you !