FR

Labelling charts

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
]