Components

Chart Legend

Chart Legend is a stand-alone utility that can be used to add a legend to chart components.

import { ChartLegend } from '@sproutsocial/racine'
<ChartLegend
legendLabels={[
{name: 'Likes'},
{name: 'Replies'},
{name: 'Comments'},
{name: 'Link Clicks'}
]}
/>

Properties

NameTypeDefaultDescriptionRequired?
stacked
boolean
Inline or stacked y plots
theme
"compare"
"contrast"
"extended"
"datavizRotation"
"datavizRotation"
@deprecated legend themes will be handled automatically by the standard dataviz rotation in a future version
legendLabels
TypeLegendLabels[]
Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme.
orientation
string
Orientation of the legend
qa
object

Recipes

With Icons

<ChartLegend
legendLabels={[
{
name: (
<Box display="flex" alignItems="center">
<Icon name="facebook" size="mini" mr={300} />
Facebook
</Box>
),
},
{
name: (
<Box display="flex" alignItems="center">
<Icon name="instagram" size="mini" mr={300} />
Instagram
</Box>
),
},
{
name: (
<Box display="flex" alignItems="center">
<Icon name="twitter" size="mini" mr={300} />X
</Box>
),
},
{
name: (
<Box display="flex" alignItems="center">
<Icon name="threads" size="mini" mr={300} />
Threads
</Box>
),
},
{
name: (
<Box display="flex" alignItems="center">
<Icon name="linkedin" size="mini" mr={300} />
LinkedIn
</Box>
),
},
]}
/>