import React from 'react' ; import { Chart , Datum , LegendStrategy , Partition , PartitionLayout , Settings } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { getFlatData , getLayerSpec , maxDepth } from '../utils/hierarchical_input_utils' ; import { plasma18 as palette } from '../utils/utils' ; const color = [ ... palette ] . reverse ( ) ; export const Example = ( ) => { return ( < Chart > < Settings showLegend flatLegend legendPosition = "right" legendStrategy = { LegendStrategy . PathWithDescendants } legendMaxDepth = { maxDepth } baseTheme = { useBaseTheme ( ) } theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { minFontSize : 6 , maxFontSize : 10 , } , } } /> < Partition id = "spec_1" data = { getFlatData ( ) } layout = { PartitionLayout . flame } valueAccessor = { ( d ) => d . value } valueFormatter = { ( ) => '' } layers = { getLayerSpec ( color ) } / > < /Chart>); } ; Example . parameters = { background : { default : 'white' } , } ;