Basic usage

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

import CigaretteMockData from './mock';

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

const data = CigaretteMockData.Default;

export default Demo;

Layouts

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

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

import CigaretteMockData from './mock';

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 = CigaretteMockData.Default;

export default Demo;

Tooltip type

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

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

import CigaretteMockData from './mock';

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 = CigaretteMockData.Default;

export default Demo;

Click interaction

You can add some click interaction for the chart sectors.

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

import CigaretteMockData from './mock';

function Demo() {
  const handleClick = (key: string) => {
    console.log('click', key);
  };

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

const data = CigaretteMockData.Default;

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 type { interpolateValue } from '@semcore/ui/d3-chart';
import { Chart } from '@semcore/ui/d3-chart';
import React from 'react';

import CigaretteMockData from './mock';

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

// @ts-ignore
const data = CigaretteMockData.EdgeCase as Record<string, number | typeof interpolateValue>;

export default Demo;

Initial data loading

Use Skeleton for the initial chart loading.

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

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 type { PlotSummarizerConfig } from '@semcore/ui/d3-chart';
import { Chart } from '@semcore/ui/d3-chart';
import React from 'react';

import CigaretteMockData from './mock';

const a11yAltTextConfig: PlotSummarizerConfig = {
  valuesFormatter: (value: unknown) => {
    const numericValue = typeof value === 'number' ? value : Number(value);
    const percent = ((numericValue / sum) * 100).toFixed(2);
    return `${numericValue} (${percent}%)`;
  },
};

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

const data = CigaretteMockData.Default;

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

export default Demo;