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.

sourcedatastory.org
<ChartFooter />

Source

The text in the source can be edited via the sourceText prop.

Source: United Nations Meteorological Institutedatastory.org
<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.

sourcedatastory.org
<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.

sourcedatastory.org
<ChartFooter py="1rem" px="1rem" />

ChartFooter props

Name

Type

Default

sourceText

string

"source"

logoProps

object

textProps

object

color

string

"grey.600"

py

stringarray

"0.75rem"

Sections