import React from 'react' ; import { Chart , Goal , Color , BandFillColorAccessorInput , Settings } from '@elastic/charts' ; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants' ; import { useBaseTheme } from '../../use_base_theme' ; const subtype = GoalSubtype . Goal ; const colorMap = { 200 : '#fc8d62' , 250 : 'lightgrey' , 300 : '#66c2a5' , } ; const bandFillColor = ( x ) : Color => colorMap [ x ] ; export const Example = ( ) => ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } / > < Goal id = "spec_1" subtype = { subtype } base = { 0 } target = { 260 } actual = { 280 } bands = { [ 200 , 250 , 300 ] } ticks = { [ 0 , 50 , 100 , 150 , 200 , 250 , 300 ] } tickValueFormatter = { ( { value } ) => String ( value ) } bandFillColor = { ( { value } ) => bandFillColor ( value ) } labelMajor = "" labelMinor = "" centralMajor = "280 MB/s" centralMinor = "" angleEnd = { - ( Math . PI - ( 2 * Math . PI ) / 3 ) / 2 } angleStart = { ( Math . PI - ( 2 * Math . PI ) / 3 ) / 2 } /> < /Chart>);