<>
<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>
</>