Labelling charts

Charts include a title, a subtitle, axes, and a legend.

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.

See also Bank style for editorial guidelines for these and other chart labels, including:

  • notes
  • sources
  • last observations

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
  • 14pt is used as the default size for regular charts
  • 12pt font

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

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

Shortcode


                [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
]
            

Example

Shortcode


                [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
]