'Amcharts5 - Error You cannot have multiple Roots on the same DOM node - React 17

I want to create a chart with amcharts5 in my react app.

I instantiate a root element of amcharts5 in a component that I import in my app component. I get the following error

You cannot have multiple Roots in the same DOM node

Here's my version:

"react": "^17.0.2"
"@amcharts/amcharts5": "^5.1.1"

Here's my code:

import { useLayoutEffect } from 'react'
import * as am5 from '@amcharts/amcharts5'

export default function AmCharts5() {
  useLayoutEffect(() => {
    let root = am5.Root.new('chartdiv')

    // root.current = root
    // here is a second Error : Property 'current' does not exist on type 'Root'


    return () => {
      root.dispose()
    }
  }, [])

  return <div id="chartdiv" style={{ width: '100%', height: '500px' }}></div>
}
reactjsamchartsamcharts5sqlazureazure-stream-analytics


Solution 1:[1]

You should add dynamic id prop on chart component and use that in am5.Root.new(${props.id}) and add id={props.id} in return div that related to amchart.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roman Mahotskyi

Related Questions