TIP

For core principles, concept description, API and changelog, refer to the D3 chart.

Basic usage

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

import BarMockData from './mock';

const Demo = () => {
  return (
    <Chart.CompactHorizontalBar
      y='category'
      x='value'
      data={data}
      plotWidth={500}
      plotHeight={450}
      aria-label='CompactHorizontalBar chart'
    />
  );
};

const data = BarMockData.WithValue;

export default Demo;

Advanced usage

import { Flex } from '@semcore/ui/base-components';
import { Plot, CompactHorizontalBar } from '@semcore/ui/d3-chart';
import { Text } from '@semcore/ui/typography';
import { scaleLinear, scaleBand } from 'd3-scale';
import React from 'react';

import BarMockData from './mock';

const Demo = () => {
  const MARGIN = 30;
  const width = 500;
  const height = 500;

  const sum = data.reduce((acc, d) => acc + d.value, 0);

  const xScale = scaleLinear().range([0, width]).domain([0, sum]);

  const yScale = scaleBand()
    .range([height - MARGIN, MARGIN])
    .domain([...data].reverse().map((d) => d.category))
    .paddingInner(0.6)
    .paddingOuter(0.6);

  return (
    <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
      <CompactHorizontalBar x='value' y='category'>
        <CompactHorizontalBar.Hover />
        <CompactHorizontalBar.Tooltip>
          {({ index }) => {
            return {
              children: (
                <>
                  <CompactHorizontalBar.Tooltip.Title>
                    {data[index].category}
                  </CompactHorizontalBar.Tooltip.Title>
                  <Flex justifyContent='space-between'>
                    <CompactHorizontalBar.Tooltip.Dot mr={4}>Bar</CompactHorizontalBar.Tooltip.Dot>
                    <Text bold>{data[index].value}</Text>
                  </Flex>
                </>
              ),
            };
          }}
        </CompactHorizontalBar.Tooltip>
        <CompactHorizontalBar.Annotation>
          <CompactHorizontalBar.Label />
          <CompactHorizontalBar.Percent />
          <CompactHorizontalBar.Value />
        </CompactHorizontalBar.Annotation>
        <CompactHorizontalBar.Bar>
          <CompactHorizontalBar.Bar.Background />
          <CompactHorizontalBar.Bar.Fill />
        </CompactHorizontalBar.Bar>
      </CompactHorizontalBar>
    </Plot>
  );
};

const data = BarMockData.WithValue;

export default Demo;

With links

import { Flex } from '@semcore/ui/base-components';
import { Plot, CompactHorizontalBar } from '@semcore/ui/d3-chart';
import Link from '@semcore/ui/link';
import { Text } from '@semcore/ui/typography';
import { scaleLinear, scaleBand } from 'd3-scale';
import React from 'react';

import BarMockData from './mock';

const Demo = () => {
  const MARGIN = 30;
  const width = 500;
  const height = 500;

  const sum = data.reduce((acc, d) => acc + d.value, 0);

  const xScale = scaleLinear().range([0, width]).domain([0, sum]);

  const yScale = scaleBand()
    .range([height - MARGIN, MARGIN])
    .domain([...data].reverse().map((d) => d.category))
    .paddingInner(0.6)
    .paddingOuter(0.2);

  return (
    <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
      <CompactHorizontalBar x='value' y='category'>
        <CompactHorizontalBar.Hover />
        <CompactHorizontalBar.Tooltip>
          {({ index }) => {
            return {
              children: (
                <>
                  <CompactHorizontalBar.Tooltip.Title>
                    {data[index].category}
                  </CompactHorizontalBar.Tooltip.Title>
                  <Flex justifyContent='space-between'>
                    <CompactHorizontalBar.Tooltip.Dot mr={4}>Bar</CompactHorizontalBar.Tooltip.Dot>
                    <Text bold>{data[index].value}</Text>
                  </Flex>
                </>
              ),
            };
          }}
        </CompactHorizontalBar.Tooltip>
        <CompactHorizontalBar.Annotation>
          <CompactHorizontalBar.Label />
          <CompactHorizontalBar.Percent />
          <CompactHorizontalBar.Value tag={Link} href='https://semrush.com'>
            {({ formatted }) => {
              return (
                <Link.Text>
                  ~
                  {formatted}
                </Link.Text>
              );
            }}
          </CompactHorizontalBar.Value>
        </CompactHorizontalBar.Annotation>
        <CompactHorizontalBar.Bar>
          <CompactHorizontalBar.Bar.Background />
          <CompactHorizontalBar.Bar.Fill />
        </CompactHorizontalBar.Bar>
      </CompactHorizontalBar>
    </Plot>
  );
};

const data = BarMockData.WithValue;

export default Demo;

Clickable bars

This is a basic example.

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

import BarMockData from './mock';

const Demo = () => {
  return (
    <Flex flexWrap gap={5}>
      <Chart.CompactHorizontalBar
        y='category'
        x='value'
        data={data}
        plotWidth={500}
        plotHeight={450}
        onClickBar={(barIndex) => alert(`Bar ${barIndex} clicked`)}
        aria-label='CompactHorizontalBar chart'
      />
    </Flex>
  );
};

const data = BarMockData.WithValue;

export default Demo;

This is a more detailed example if you need to expand the component.

import { Flex } from '@semcore/ui/base-components';
import { Plot, CompactHorizontalBar } from '@semcore/ui/d3-chart';
import { Text } from '@semcore/ui/typography';
import { scaleLinear, scaleBand } from 'd3-scale';
import React from 'react';

import BarMockData from './mock';

const Demo = () => {
  const MARGIN = 30;
  const width = 500;
  const height = 500;

  const sum = data.reduce((acc, d) => acc + d.value, 0);

  const xScale = scaleLinear().range([0, width]).domain([0, sum]);

  const yScale = scaleBand()
    .range([height - MARGIN, MARGIN])
    .domain([...data].reverse().map((d) => d.category))
    .paddingInner(0.6)
    .paddingOuter(0.2);

  return (
    <Flex flexWrap gap={5}>
      <Plot data={data} scale={[xScale, yScale]} width={width} height={height}>
        <CompactHorizontalBar x='value' y='category'>
          <CompactHorizontalBar.Hover />
          <CompactHorizontalBar.Tooltip>
            {({ index }) => {
              return {
                children: (
                  <>
                    <CompactHorizontalBar.Tooltip.Title>
                      {data[index].category}
                    </CompactHorizontalBar.Tooltip.Title>
                    <Flex justifyContent='space-between'>
                      <CompactHorizontalBar.Tooltip.Dot mr={4}>
                        Bar
                      </CompactHorizontalBar.Tooltip.Dot>
                      <Text bold>{data[index].value}</Text>
                    </Flex>
                  </>
                ),
              };
            }}
          </CompactHorizontalBar.Tooltip>
          <CompactHorizontalBar.Annotation>
            <CompactHorizontalBar.Label />
            <CompactHorizontalBar.Percent />
            <CompactHorizontalBar.Value />
          </CompactHorizontalBar.Annotation>
          <CompactHorizontalBar.Bar onClick={(barIndex: any) => alert(`Bar ${barIndex} clicked`)}>
            <CompactHorizontalBar.Bar.Background />
            <CompactHorizontalBar.Bar.Fill />
          </CompactHorizontalBar.Bar>
        </CompactHorizontalBar>
      </Plot>
    </Flex>
  );
};

const data = BarMockData.WithValue;

export default Demo;