Chart Legend

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

Name	Type	Default	Description
`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>
      ),
    },
  ]}
/>