Recipes

With Icons

Live Editor

function ChartLegendWithIconsExample() {
  return (
    <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>
          ),
        },
      ]}
    />
  );
}