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