Charts include a title, a subtitle, axes, and a legend.
See also Bank style for editorial guidelines (available to Bank employees only) for these and other chart labels, including:
- notes
- sources
- last observations
Hovering over the chart displays more precise data. The chart units will not be included here as they are reflected on the chart’s axes.
Title
- Tell the story of the chart using a short, clear title.
- Use sentence case to aid readability.
Typography
- Bold text
- 14pt is used as the default size for regular charts
- 18pt is used for full width charts
Subtitle
- Add context to the title using a short, clear subtitle.
- Use sentence case to aid readability.
Typography
- Regular text
- 12pt font is used as the default size for regular charts
- 14pt is used for full width charts
Axes
- Identify the axes with clear, concise labels.
- Position the labels outside the data area of the chart.
- Centre the text label.
- Place chart units ($ and %) on each number in the axis rather than on the axis itself.
Legend
- Unless the chart features a single value, provide a legend.
- Use clear, concise labels.
Example: Default size
[amcharts
id="serial"
data-type="time"
data-series0="FXEURCAD"
data-series0label="Legend name"
data-chartTitle="Title"
data-subtitle="Subtitle"
data-rightAxisTitle="Right axis title"
data-height=350
]
<div id="amchart1" style="width:100%;min-height:350px;page-break-inside:avoid;height:350px;"> <![if (!IE)|(gte IE 9)]><noscript><![endif]><div class="alert alert-warning"><p class="lead">A modern browser with javascript enabled is required to view our charts.</p><p>Alternatively, the data is available for download in:</p><ul><li><a href='https://www.bankofcanada.ca/valet/observations/FXEURCAD/xml' class='ga-event' data-ga-category='Valet' data-ga-action='observations/FXEURCAD/xml'>XML</a></li><li><a href='https://www.bankofcanada.ca/valet/observations/FXEURCAD/json' class='ga-event' data-ga-category='Valet' data-ga-action='observations/FXEURCAD/json'>JSON</a></li><li><a href='https://www.bankofcanada.ca/valet/observations/FXEURCAD/csv' class='ga-event' data-ga-category='Valet' data-ga-action='observations/FXEURCAD/csv'>CSV</a></li></ul></div><![if (!IE)|(gte IE 9)]></noscript><![endif]></div>
<div id="amchart1-legend" class="amChartsLegend amchart-legend-div" style="overflow: hidden; position: relative; text-align: left;"></div>Example: Full width
[amcharts
id="serial"
data-type="time"
data-series0="FXUSDCAD"
data-series0label="Legend name"
data-titleStyle="big"
data-chartTitle="Title"
data-subtitle="Subtitle"
data-categoryscrollbar=true
data-datezoom=1Y
data-rightAxisTitle="Right axis title"
data-height=350
]