DonutChart

<Box width="40%">
  <DonutChart
    points={[
      {
        value: 567,
        axisLabelX: "Sep 11",
        tooltip: (
          <Text variant="sm" p={0.5}>
            yay!
          </Text>
        ),
      },
      {
        value: 300,
        axisLabelX: "Sep 12",
        tooltip: { title: "Sep 12", description: "300 clicks" },
      },
      {
        value: 800,
        axisLabelX: "Sep 16",
        tooltip: { title: "Sep 16", description: "800 clicks" },
      },
    ]}
  />
</Box>
ReferenceError: DonutChart is not defined

Two charts in the same row (each take the entire width available)

<>
  <Box width="50%" display="inline-block" p="3">
    <DonutChart
      points={[
        {
          value: 567,
          axisLabelX: "Sep 11",
          tooltip: (
            <Text variant="sm" p={0.5}>
              yay!
            </Text>
          ),
        },
        {
          value: 400,
          axisLabelX: "Sep 15",
          tooltip: { title: "Sep 15", description: "400 clicks" },
        },
        {
          value: 800,
          axisLabelX: "Sep 16",
          tooltip: { title: "Sep 16", description: "800 clicks" },
        },
      ]}
    />
  </Box>
  <Box width="50%" display="inline-block" p="3">
    <DonutChart
      points={[
        {
          value: 423,
          axisLabelX: "Sep 10",
          tooltip: { title: "Sep 10", description: "423 clicks" },
        },
        {
          value: 567,
          axisLabelX: "Sep 11",
          tooltip: (
            <Text variant="sm" p={0.5}>
              yay!
            </Text>
          ),
        },
        {
          value: 200,
          axisLabelX: "Sep 13",
          tooltip: { title: "Sep 13", description: "200 clicks" },
        },
      ]}
    />
  </Box>
</>
ReferenceError: DonutChart is not defined

Custom margin for long labels

<Box width="50%">
  <DonutChart
    margin={50}
    points={[
      {
        value: 423,
        axisLabelX: "September 10",
        tooltip: { title: "September 10", description: "423 clicks" },
      },
      {
        value: 567,
        axisLabelX: "September 11",
        tooltip: (
          <Text variant="sm" p={0.5}>
            yay!
          </Text>
        ),
      },
      {
        value: 300,
        axisLabelX: "September 12",
        tooltip: { title: "September 12", description: "300 clicks" },
      },
      {
        value: 800,
        axisLabelX: "September 16",
        tooltip: { title: "September 16", description: "800 clicks" },
      },
    ]}
  />
</Box>
ReferenceError: DonutChart is not defined

No labels, only tooltips and 0 margin

<Box width="30%" my={2}>
  <DonutChart
    margin={0}
    points={[
      {
        value: 423,
        tooltip: { title: "Sep 10", description: "423 clicks" },
      },
      {
        value: 567,
        tooltip: (
          <Text variant="sm" p={0.5}>
            yay!
          </Text>
        ),
      },
      {
        value: 300,
        tooltip: { title: "Sep 12", description: "300 clicks" },
      },
      {
        value: 200,
        tooltip: { title: "Sep 13", description: "200 clicks" },
      },
    ]}
  />
</Box>
ReferenceError: DonutChart is not defined

With title/description labels

<Box width="50%">
  <DonutChart
    margin={50}
    points={[
      {
        value: 423,
        axisLabelX: { title: "September 10", description: "10%" },
        tooltip: { title: "September 10", description: "423 clicks" },
      },
      {
        value: 567,
        axisLabelX: { title: "September 11", description: "20%" },
        tooltip: (
          <Text variant="sm" p={0.5}>
            yay!
          </Text>
        ),
      },
      {
        value: 300,
        axisLabelX: { title: "September 12", description: "15%" },
        tooltip: { title: "September 12", description: "300 clicks" },
      },
    ]}
  />
</Box>
ReferenceError: DonutChart is not defined
On this page
Two charts in the same row (each take the entire width available)
Custom margin for long labels
No labels, only tooltips and 0 margin
With title/description labels