Usage with different chart types

• 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 as LegendItem

You can set your custom SVG shape for a LegendItem.

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

const data = [...Array(5).keys()].map((d, i) => ({
  x: i,
  Line1: Math.random() * 10,
  Line2: Math.random() * 10,
  Line3: Math.random() * 10,
  Line4: Math.random() * 10,
  Line5: Math.random() * 10,
}));

const Shape = (props) => {
  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>
          <ChartLegend.LegendItem.Shape style={{ background: 'transparent' }}>
            {(props) => {
              return <Shape {...props} />;
            }}
          </ChartLegend.LegendItem.Shape>
          <ChartLegend.LegendItem.Label />
        </ChartLegend.LegendItem>
      </ChartLegend>
    </div>
  );
};

export default Demo;

Table view

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

const data = [...Array(5).keys()].map((d, i) => ({
  x: i,
  Line1: Math.random() * 10,
  Line2: Math.random() * 10,
  Line3: Math.random() * 10,
  Line4: Math.random() * 10,
  Line5: Math.random() * 10,
}));

const Demo = () => {
  const lines = 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'}>{(42 * (index + 3)) / 10}%</Text>,
          <Text use={'primary'}>{42 * (index + 3)}</Text>,
        ],
      };
    });

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

export default Demo;