im trying to render a chart, any chart, doesnt matters which one, with "Highcharts" in a react and typescript project.
This is the script source in index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
**<script src="https://code.highcharts.com/highcharts.src.js"></script>**
</head>
<body>
<div id="main" style="width:100%;height:100%"></div>
<!-- Main -->
<!-- Main -->
</body>
</html>
This is how im using highcharts:
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Highcharts from "highcharts";
let myChart = Highcharts.chart("main",{
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
export default class Home extends React.Component<any, any> {
render() {
return (
<div>
{myChart}
</div>
)
}
}
Im getting this error:
Please, some one can help? Maybe give a working example of highcharts using typescript and react..
