Chart Legend

<ChartLegend className="stacked-bar-legend" chartData={[{'Onshore':20, 'Offshore': 300, 'GOMESA':10}]} ></ChartLegend>
Onshore:20
Offshore:300
GOMESA:10
Total:330

The Chart Legend is legendary. Ryan and/or Shannon please add a description.

How to use

The legend can be used with any chart to display the values of each fo the data poitns with a calculated sum for the total.

Chart Data:

This is an array of objects that will be used to populate the legend

Display Names:

The developer can specify a name to display other than the default key for the data

Format Data Function:

You can pass a format function that will be applied to each data value in the chart data.

CSS for colors:

Each colored box next to the data name can be colored using css.

Props/Methods

Chart Legend is used to display rows of data keys and values. Each data key can be associated with a format function, a color(using css) and a display name.

NameDescriptionTypeRequiredDefault
chartData

Array of key value pairs

arrayyesN/A
displayNames

Defines the display name/info of the data keys in the chart. Keys should match the data keys

objectnoN/A
dataFormatFunc

A function that will be applied on each data item of the chart data

funcnoN/A
className

Specify a class name to be added to the outer element

stringnoN/A