Labelling charts

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

Typography

  • Bold text
  • 14pt is used as the default size for regular charts
  • 18pt is used for full width charts

Title

  • Tell the story of the chart using a short, clear title.
  • Use sentence case to aid readability.

<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="EURO exchange rate"
  data-chartTitle="Title"
  data-subtitle="Subtitle"
  data-rightAxisTitle="Right axis title"
  data-height=350
]
            

Subtitle

  • Add context to the title using a short, clear subtitle.
  • Use sentence case to aid readability.

Shortcode


                [amcharts
  id="serial"
  data-type="time"
  data-series0="FXUSDCAD"
  data-series0label="USD exchange rate"
  data-titleStyle="big"
  data-chartTitle="Title"
  data-subtitle="Subtitle"
  data-categoryscrollbar=true
  data-datezoom=1Y
  data-rightAxisTitle="Right axis title"
  data-height=350
]
            

Axes

  • Identify the axes with clear, concise labels.
  • Position the labels outside the data area of the chart.
  • Centre the text label.

Legend

  • Unless the chart features a single value, provide a legend.
  • Use clear, concise labels.