Estoy tratando de trazar un gráfico en mi proyecto usando 'react-highcharts', estoy siguiendo un curso de udemy.

Pero el gráfico no se está trazando, sino que muestra una página en blanco ...

Estoy enumerando los archivos, que tienen código relacionado con el gráfico...

1. índice.js

 import React from 'react'; import styled from 'styled-components'; import Page from '../Shared/Page'; import PriceGrid from './PriceGrid'; import CoinSpotlight from './CoinSpotlight'; import PriceChart from './PriceChart'; const ChartGrid = styled.div` display: grid; margin-top: 20px; grid-gap: 15px; grid-template-columns: 1fr 3fr; ` export default function(){ return <Page name="dashboard"> <PriceGrid/> <ChartGrid> <CoinSpotlight/> <PriceChart/> </ChartGrid> </Page> }

2. PriceChart.js

 import highchartsConfig from './HighchartsConfig'; import React from 'react'; import {Tile} from "../Shared/Tile"; import {AppContext} from "../App/AppProvider"; import ReactHighcharts from 'react-highcharts'; export default function() { return ( <AppContext.Consumer> {({}) => <Tile> <ReactHighcharts config={highchartsConfig()}/> </Tile> } </AppContext.Consumer> ) }

3. HighchartsConfig.js

 export default function () { return { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }; }

El instructor está usando el mismo código y su código está funcionando, pero no el mío, ¿alguien puede ayudarme a descubrir qué está mal aquí?