import React from 'react' ; import { Chart , Datum , Partition , PartitionLayout , Settings , defaultPartitionValueFormatter } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { indexInterpolatedFillColor , interpolatorCET2s } from '../utils/utils' ; export const Example = ( ) => ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , } } /> < Partition id = "spec_1" data = { [ { sitc1 : 'Machinery and transport equipment' , exportVal : 5 } , { sitc1 : 'Mineral fuels, lubricants and related materials' , exportVal : 4 } , ] } layout = { PartitionLayout . sunburst } valueAccessor = { ( d ) => d . exportVal as number } valueFormatter = { ( d ) => `$${ defaultPartitionValueFormatter ( Math . round ( d ) ) }` } layers = { [ { groupByRollup : ( d ) => d . sitc1 , shape : { fillColor : indexInterpolatedFillColor ( interpolatorCET2s ) , } , } , ] } / > < /Chart>);