score:5

Accepted answer

to answer my own question here, the render function is called after highcharts attempts to look for the div. you can put the chart rendering code in the componentdidmount() section, render the highcharts code directly using dangerouslysetinnerhtml, or set a timer on the highcharts code. to the other answer, the problem with sticking the div tag in my html is that i'm rendering everything else in the jsx and thus want to render my chart from inside my jsx.

score:0

js bin demo

html

<!doctype html>
<html>
<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react-highcharts/11.0.0/reacthighcharts.js"></script>
    <meta charset="utf-8">
    <title>react-highcharts</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

js part

var config = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'world\'s largest cities per 2014'
    },
    subtitle: {
        text: 'source: <a href="http://en.wikipedia.org/wiki/list_of_cities_proper_by_population">wikipedia</a>'
    },
    xaxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontsize: '13px',
                fontfamily: 'verdana, sans-serif'
            }
        }
    },
    yaxis: {
        min: 0,
        title: {
            text: 'population (millions)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointformat: 'population in 2008: <b>{point.y:.1f} millions</b>'
    },
    series: [{
        name: 'population',
        data: [
            ['shanghai', 23.7],
            ['lagos', 16.1],
            ['istanbul', 14.2],
            ['karachi', 14.0],
            ['mumbai', 12.5],
            ['moscow', 12.1],
            ['são paulo', 11.8],
            ['beijing', 11.7],
            ['guangzhou', 11.1],
            ['delhi', 11.1],
            ['shenzhen', 10.5],
            ['seoul', 10.4],
            ['jakarta', 10.0],
            ['kinshasa', 9.3],
            ['tianjin', 9.3],
            ['tokyo', 9.0],
            ['cairo', 8.9],
            ['dhaka', 8.9],
            ['mexico city', 8.9],
            ['lima', 8.9]
        ],

    }]
};

reactdom.render(
  <reacthighcharts config = {config}/>,
  document.getelementbyid('container')
);

Related Query

More Query from same tag