CODEWITHSUNDEEP
reactjstypescripthighcharts
Benny67b
Benny67b

Reputation: 557

How to use Highcharts in typescript and react

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:

Highcharts Error

Please, some one can help? Maybe give a working example of highcharts using typescript and react..

Upvotes: 2

Views: 9447

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

error states Highcharts already defined in the page no need for script tag for highcharts, use highcharts modules from npm

Check this live demo

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>
            )
        }
}

html

 <div id="main" style="width:100%;height:100%"></div>

Upvotes: 1

Related Questions