Cigarette chart

Basic usage

tsx

import React from 'react';
import { Chart } from 'intergalactic/d3-chart';

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

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

export default Demo;

import React from 'react';
import { Chart } from 'intergalactic/d3-chart';

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

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}.

tsx

import React from 'react';
import { Chart } from 'intergalactic/d3-chart';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/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}
      />

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

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

export default Demo;

import React from 'react';
import { Chart } from 'intergalactic/d3-chart';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/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}
      />

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

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

export default Demo;

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

tsx

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

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

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

export default Demo;

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

function Demo() {
  return (
    <Flex gap={10} flexWrap={true}>
      <Chart.Cigarette data={data} plotWidth={400} plotHeight={28} />
      <Chart.Cigarette data={data} plotWidth={400} plotHeight={28} tooltipViewType='single' />
    </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.

tsx

import React from 'react';
import { Chart } from 'intergalactic/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} />;
}

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

export default Demo;

import React from 'react';
import { Chart } from 'intergalactic/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} />;
}

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.

tsx

import React from 'react';
import { Chart, interpolateValue } from 'intergalactic/d3-chart';

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

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

export default Demo;

import React from 'react';
import { Chart, interpolateValue } from 'intergalactic/d3-chart';

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

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.

tsx

import React from 'react';
import Skeleton from 'intergalactic/skeleton';

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

export default Demo;

import React from 'react';
import Skeleton from 'intergalactic/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.

tsx

import React from 'react';
import { Chart, PlotSummarizerConfig } from 'intergalactic/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}
    />
  );
}

export default Demo;

import React from 'react';
import { Chart, PlotSummarizerConfig } from 'intergalactic/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}
    />
  );
}

export default Demo;

Accessibility

Writing code

CSS Injection

Basic usage

Layouts

Tooltip type

Click interaction

No value for some key

Initial data loading

Custom accessible text

Accessibility

CSS Injection

Cigarette chart

Basic usage ​

Layouts ​

Tooltip type ​

Click interaction ​

No value for some key ​

Initial data loading ​

Custom accessible text ​

Basic usage

Layouts

Tooltip type

Click interaction

No value for some key

Initial data loading

Custom accessible text