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	Description
`stacked`	`boolean`	Inline or stacked y plots
`theme`	`'compare'` `'contrast'` `'extended'`
`legendLabels`	`{ name: React.Node, color?: string, }`	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.
`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>
      ),
    },
  ]}
/>