Usage with charts

• For usage with Line chart, refer to the example in the Line chart.
• For usage with Bar chart, refer to the example in the Stacked bar chart.
• For usage with Donut chart, refer to the example in the Donut chart.

Custom shape

You can set your custom SVG shape for a LegendItem.

import { useColorResolver } from '@semcore/ui/core/lib/utils/use/useColorResolver';
import type { LegendItem } from '@semcore/ui/d3-chart';
import { ChartLegend } from '@semcore/ui/d3-chart';
import React from 'react';

import ChartLegendMockData from './mock';

const Shape = (props: any) => {
  const colorResolver = useColorResolver();

  return (
    <div
      style={{
        width: '0',
        height: '0',
        borderTop: '8px solid transparent',
        borderLeft: `16px solid ${colorResolver(props.color)}`,
        borderBottom: '8px solid transparent',
        marginRight: '4px',
      }}
    />
  );
};

const Demo = () => {
  const lines = Object.keys(data[0])
    .filter((name) => name !== 'x')
    .reduce<LegendItem[]>((res, item, index) => {
      res.push({
        id: item,
        label: item,
        checked: true,
        color: `chart-palette-order-${index + 1}`,
      });

      return res;
    }, []);

  return (
    <div>
      <ChartLegend items={lines} aria-label='Chart legend aria label'>
        <ChartLegend.LegendItem shape={undefined}>
          <ChartLegend.LegendItem.Shape style={{ background: 'transparent' }}>
            {(props: any) => {
              return <Shape {...props} />;
            }}
          </ChartLegend.LegendItem.Shape>
          <ChartLegend.LegendItem.Label />
        </ChartLegend.LegendItem>
      </ChartLegend>
    </div>
  );
};

const data = ChartLegendMockData.Default;

export default Demo;

Table view

import { ChartLegendTable } from '@semcore/ui/d3-chart';
import { Text } from '@semcore/ui/typography';
import React from 'react';

import ChartLegendMockData from './mock';

const Demo = () => {
  const [legendItems, setLegendItems] = React.useState(
    Object.keys(data[0])
      .filter((key) => key !== 'x')
      .map((item, index) => {
        return {
          id: item,
          label: `Item ${index + 1}`,
          checked: true,
          color: `chart-palette-order-${index + 1}`,
          columns: [
            <Text use='secondary' key={1}>
              {(42 * (index + 3)) / 10}
              %
            </Text>,
            <Text use='primary' key={2}>{42 * (index + 3)}</Text>,
          ],
        };
      }),
  );

  const onChangeVisibleItem = (id: string, isVisible: boolean) => {
    setLegendItems((prevItems) => {
      return prevItems.map((item) => {
        if (item.id === id) {
          item.checked = isVisible;
        }

        return item;
      });
    });
  };

  return (
    <div style={{ width: '200px' }}>
      <ChartLegendTable onChangeVisibleItem={onChangeVisibleItem} items={legendItems} aria-label='Chart legend aria label' />
    </div>
  );
};

const data = ChartLegendMockData.Default;

export default Demo;