@ds-kit/chart-footer
v5.1.1
Published
Chart footer component
Downloads
10
Readme
title: "ChartFooter" slug: "/packages/chart-footer" category: "charts" componentNames:
- "ChartFooter"
ChartFooter
The Chart footer component is used when creating new static or interactive charts, particularly with Chart Maker. By default the chart footer uses a secondary grey text color and the default Datastory logo.
Basic example
The simples example of the chart footer will render a data source text placeholder and the datastory logo.
<ChartFooter />
Source
The text in the source can be edited via the sourceText
prop.
<ChartFooter sourceText="Source: United Nations Meteorological Institute" />
Color customization
The color of the text can be modified through the color
prop. You can also customize the logo by changing the color or specifying whether it should be outlined.
<Div bg="blue.900">
<ChartFooter color="white" logoProps={{ color: "white", outlined: true }} />
</Div>
Spacing
By default the chart footer has vertical paddings. If necessary these can be modified via the py
prop. Additionally, you could add horizontal paddings with px
.
<ChartFooter py="1rem" px="1rem" />