CODEWITHSUNDEEP
javascriptreactjssvghighcharts
Govinda Totla
Govinda Totla

Reputation: 606

React Element on Highcharts

Is it possible to render a react component on highcharts' chart? HTML is possible using methods of SVGRenderer but how to do it for react component?

Minimal Reproducer / Playground: https://jsfiddle.net/k07g9aj6/

const chart = Highcharts.chart('container', {
        series: [{
            data: [1, 2, 3, 4, 5]
    }]
})

class ReactButton extends React.Component {
        _onClick() {
            console.log("Clicked");
    }
    
    render() {
            return <button onClick={this._onClick}>ReactButton</button>;
    }
}

chart.renderer.button(<ReactButton />, 100, 200,).attr({
        zIndex: 3
}).add();

Note that button is only an example here, I want to know if I can render any complex react component on highcharts' chart. One way I considered was converting the react element to html and read about it here but it does not work for me as I expect it to.

I also considered rendering over the svg element but I am not sure if that is the best solution and also it may be hard to keep it responsive.

Can you please help me out? Thanks.

Upvotes: 1

Views: 1861

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Only pure HTML is allowed to render through the renderer method. To use React components you have to convert them to HTML by using renderToString or renderToStaticMarkup methods, or use portals and render components into already exisitng chart elements.

Useful thread: https://github.com/highcharts/highcharts-react/issues/23

Docs: https://github.com/highcharts/highcharts-react#how-to-add-react-component-to-a-charts-element

Upvotes: 1

Related Questions