Basic usage

import React from 'react';
import { Chart } from '@semcore/ui/d3-chart';

function Demo() {
  return (
    <Chart.Cigarette data={data} plotWidth={400} plotHeight={28} aria-label={'Cigarette chart'} />
  );
}

const data = {
  Cats: 3524,
  Dogs: 1344,
  Capybaras: 6135,
  Hamsters: 1456,
  Birds: 1823,
};

export default Demo;

Layouts

To change the layout of the chart from horizontal to vertical, just set invertAxis={false}.

import React from 'react';
import { Chart } from '@semcore/ui/d3-chart';
import { Flex } from '@semcore/ui/flex-box';
import { Text } from '@semcore/ui/typography';

function Demo() {
  return (
    <Flex gap={15} flexWrap={true}>
      <Chart.Cigarette
        data={data}
        plotWidth={280}
        plotHeight={28}
        header={
          <Text size={500} bold mb={2}>
            Total value
          </Text>
        }
        showLegend={true}
        tooltipTitle='Some title for tooltip'
        showTotalInTooltip={true}
        aria-label={'Cigarette chart'}
      />

      <Chart.Cigarette
        data={data}
        plotWidth={44}
        plotHeight={200}
        invertAxis={false}
        header={
          <Text size={500} bold>
            Total value
          </Text>
        }
        showLegend={true}
        aria-label={'Cigarette chart'}
      />
    </Flex>
  );
}

const data = {
  Cats: 3524,
  Dogs: 1344,
  Capybaras: 6135,
  Hamsters: 1456,
  Birds: 1823,
};

export default Demo;

Tooltip type

In the tooltip, you can display the values of all chart sectors or just one of them.

import React from 'react';
import { Chart } from '@semcore/ui/d3-chart';
import { Flex } from '@semcore/ui/flex-box';

function Demo() {
  return (
    <Flex gap={10} flexWrap={true}>
      <Chart.Cigarette data={data} plotWidth={400} plotHeight={28} aria-label={'Cigarette chart'} />
      <Chart.Cigarette
        data={data}
        plotWidth={400}
        plotHeight={28}
        tooltipViewType='single'
        aria-label={'Cigarette chart'}
      />
    </Flex>
  );
}

const data = {
  Cats: 3524,
  Dogs: 1344,
  Capybaras: 6135,
  Hamsters: 1456,
  Birds: 1823,
};

export default Demo;

Click interaction

You can add some click interaction for the chart sectors.

import React from 'react';
import { Chart } from '@semcore/ui/d3-chart';

type KEY = string;

function Demo() {
  const handleClick = (key: KEY, e: React.SyntheticEvent) => {
    // biome-ignore lint/suspicious/noConsoleLog:
    console.log('click', key);
  };

  return (
    <Chart.Cigarette
      data={data}
      plotWidth={400}
      plotHeight={28}
      onClick={handleClick}
      aria-label={'Cigarette chart'}
    />
  );
}

const data: { [key: KEY]: number } = {
  Cats: 3524,
  Dogs: 1344,
  Capybaras: 6135,
  Hamsters: 1456,
  Birds: 1823,
};

export default Demo;

No value for some key

Show null and not available data in the legend and tooltip but not on the chart.

import React from 'react';
import { Chart, interpolateValue } from '@semcore/ui/d3-chart';

function Demo() {
  return (
    <Chart.Cigarette
      data={data}
      plotWidth={400}
      plotHeight={28}
      showLegend={true}
      aria-label={'Cigarette chart'}
    />
  );
}

const data: Record<string, number | typeof interpolateValue> = {
  Cats: 3524,
  Dogs: interpolateValue,
  Capybaras: 6135,
  Hamsters: null,
  Birds: 1823,
};

export default Demo;

Initial data loading

Use Skeleton for the initial chart loading.

import React from 'react';
import Skeleton from '@semcore/ui/skeleton';

function Demo() {
  return (
    <Skeleton>
      <Skeleton.Text height={24} />
    </Skeleton>
  );
}

export default Demo;

Custom accessible text

You can set a11yAltTextConfig if you need accessible text that differs from the default one.

import React from 'react';
import { Chart, PlotSummarizerConfig } from '@semcore/ui/d3-chart';
const data = {
  Cats: 3524,
  Dogs: 1344,
  Capybaras: 6135,
  Hamsters: 14,
  Birds: 1823,
};

const sum = Object.values(data).reduce((acc, item) => acc + item, 0);

const a11yAltTextConfig: PlotSummarizerConfig = {
  valuesFormatter: (value: number) => {
    const percent = Number((value / sum) * 100).toFixed(2);

    return `${value} (${percent}%).`;
  },
};

function Demo() {
  return (
    <Chart.Cigarette
      data={data}
      plotWidth={400}
      plotHeight={28}
      showLegend={true}
      a11yAltTextConfig={a11yAltTextConfig}
      aria-label={'Cigarette chart'}
    />
  );
}

export default Demo;