Use a bar chart to visualize a distribution of 1 dynamic y-axis variable over 1 consistent x-axis variable.

The extent of interaction on this component is a tool-tip that reveals on hover, showing data for that bar. This graph is intended to show relativity to itself, not relativity to other graphs.

ReferenceError: BarChart is not defined

Highlight label constrained to left edge

<>
  <Flex>
    <BarChart
      bars={[
        {
          value: 2000,
          highlightLabel: {
            title: "$30,000–$80,000",
            description: "This artwork",
          },
        },
        {
          value: 100,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 3000,
          label: { title: "Sept 30", description: "423 clicks" },
        },
      ]}
      minLabel="$500"
      maxLabel="$50,000+"
    />
  </Flex>
</>
ReferenceError: BarChart is not defined

Highlight label constrained to right edge

<>
  <Flex flexDirection="column">
    <Serif size="3" weight="medium">
      Price
    </Serif>
    <Sans size="3">Price ranges of small prints by Alex Katz</Sans>
  </Flex>
  <Flex>
    <BarChart
      bars={[
        {
          value: 2000,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 1400,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 400,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 3200,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 4000,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 100,
          label: { title: "Sept 30", description: "423 clicks" },
        },
        {
          value: 3000,
          highlightLabel: {
            title: range("$30,000", "$80,000"),
            description: "This artwork",
          },
        },
      ]}
      minLabel="$500"
      maxLabel="$50,000+"
    />
  </Flex>
</>
ReferenceError: BarChart is not defined

With X axis labels

<>
  <Flex>
    <BarChart
      bars={[
        {
          value: 2000,
          label: { title: "Sep 30", description: "423 clicks" },
          axisLabelX: "Sep 30",
        },
        {
          value: 1400,
          label: { title: "Nov 30", description: "423 clicks" },
        },
        {
          value: 400,
          label: { title: "Dec 30", description: "423 clicks" },
          axisLabelX: <Serif size="2">DECEMBER 30</Serif>,
        },
        {
          value: 3200,
          label: { title: "Jan 30", description: "423 clicks" },
        },
        {
          value: 4000,
          label: { title: "Feb 30", description: "423 clicks" },
          axisLabelX: "February 20 - June 20",
        },
        {
          value: 400,
          label: { title: "Mar 30", description: "423 clicks" },
        },
        {
          value: 800,
          label: { title: "Apr 30", description: "423 clicks" },
          axisLabelX: <Serif size="2">APRIL</Serif>,
        },
        {
          value: 0,
        },
        {
          value: 100,
          label: { title: "Jul 30", description: "423 clicks" },
          axisLabelX: "Jul 30",
        },
      ]}
    />
  </Flex>
</>
ReferenceError: BarChart is not defined
On this page
Highlight label constrained to left edge
Highlight label constrained to right edge
With X axis labels