Instructions for creating a new chart
Step 1: Include Chart.js library and global configeration settings
Make sure to include the Chart.js and custom chart-config.js in your HTML file.
You can do this by linking to the chart js header config file (#288054) in the page metadata settings .
Step 2: Set up your HTML structure
Copy the following HTML structure and paste it into the body of your new HTML file.
Modify the IDs and descriptions as needed for your new chart.
<!-- Example Chart -->
<div class="qld__chart">
<h2 class="qld__display-md">Your Chart Title</h2>
<canvas id="yourChartID" class="labels" aria-label="Description of your chart" role="img" tabindex="0"></canvas>
<div id="chartDesc" class="sr-only">
<!-- Provide a detailed description of your chart for screen readers -->
This chart shows ...
</div>
</div>
Step 3: Add chart initialisation script
Below your HTML structure, include the script to initialise your chart. You can copy the following example and customise it with your data and chart type.
Make sure to update 'yourChartID' to match the your customised chart.
<script>
document.addEventListener("DOMContentLoaded", function () {
setChartStyles().then(colors => {
// Your Chart Initialization
const ctx = document.getElementById('yourChartID').getContext('2d');
new Chart(ctx, {
type: 'bar', // Change chart type as needed
data: {
labels: ['Label1', 'Label2', 'Label3'], // X-axis labels
datasets: [{
label: 'Dataset Label', // Dataset label
data: [10, 20, 30], // Data points
backgroundColor: [colors.bgColor1Rgba, colors.bgColor2Rgba, colors.bgColor3Rgba], // Background colors (Corresponds to data array above)
borderColor: [colors.bgColor1, colors.bgColor2, colors.bgColor3], // Border colors (Corresponds to data array above)
}]
},
options: {
scales: {
y: {
beginAtZero: true // Y-axis starts at zero
}
}
}
});
});
});
</script>
Step 4: Customize the Chart
Many of the chart defaults have been set global however you will still need to set the chart type, labels, datapoints. You may also need to add of remove colours depending on the number of data points in your chart. There are 7 background and 7 border colours you can choose from when adding or removing colours.
- Chart Type: Change
type: 'bar'to any other chart type such as'line','doughnut','pie', etc. - Labels: Update the
labelsarray with the categories you want to display on the X-axis. - Data Points: Update the
dataarray with the values you want to plot. - Colors: Adjust the
backgroundColorandborderColorarrays to match your desired colours. - Classes: apply modifier classes to your canavs area if necessasry
For complex charts you may need to adjust other chart settings. Please refer to the Chart.js documentation site for help. Options that are set within the scrip on page will override any global settings.
Step 5: Ensure Accessibility
- Make sure to include meaningful
aria-labelattributes for the canvas elements. - Use
tabindex="0"to make the canvas elements focusable. - Provide detailed descriptions within visually hidden elements (
sr-onlyclass) to assist screen readers. - Also when writing alt text for you charts pleas refer to the following guidelines.
Implementation chart options, classes and variables
| Option/Class | Type | Description |
|---|---|---|
bgColor1 | Color | Background color 1 for chart elements. |
bgColor2 | Color | Background color 2 for chart elements. |
bgColor3 | Color | Background color 3 for chart elements. |
bgColor4 | Color | Background color 4 for chart elements. |
bgColor5 | Color | Background color 5 for chart elements. |
bgColor6 | Color | Background color 6 for chart elements. |
bgColorNeutral | Color | Neutral background color for chart elements. |
bgColor1Rgba | Color | Background color 1 with RGBA for transparency. |
bgColor2Rgba | Color | Background color 2 with RGBA for transparency. |
bgColor3Rgba | Color | Background color 3 with RGBA for transparency. |
bgColor4Rgba | Color | Background color 4 with RGBA for transparency. |
bgColor5Rgba | Color | Background color 5 with RGBA for transparency. |
bgColor6Rgba | Color | Background color 6 with RGBA for transparency. |
bgColorNeutralRgba | Color | Neutral background color with RGBA for transparency. |
--QLD-color__chart-bg--1 | CSS Variable | CSS variable for background color 1. |
--QLD-color__chart-bg--2 | CSS Variable | CSS variable for background color 2. |
--QLD-color__chart-bg--3 | CSS Variable | CSS variable for background color 3. |
--QLD-color__chart-bg--4 | CSS Variable | CSS variable for background color 4. |
--QLD-color__chart-bg--5 | CSS Variable | CSS variable for background color 5. |
--QLD-color__chart-bg--6 | CSS Variable | CSS variable for background color 6. |
qld__chart | Class | Applied to the chart container for styling. |
qld__chart-text-center | Class | Applies the text center plugin to display text in the center of the chart. |
qld__chart-icon-center | Class | Applies the icon center plugin to display an icon in the center of the chart. |
labels | Class | Indicates the chart should generate labels. Necessary for HTML legend. |
labels-percentage | Class | Indicates the chart should generate labels with percentages. |
sr-only | Class | Visually hides elements but keeps them accessible to screen readers. |
floating-label | Class | Styles floating labels over the chart. |
left | Class | Aligns the floating label to the left. |
right | Class | Aligns the floating label to the right. |
qld__legend-container | Class | Used when applying HTML legends. |
solid-x-axis | Class | Applied to canvas highlights x axis |
solid-y-axis | Class | Applied to canvas highlights y axis |
Explanation of Classes:
- qld__chart: Used for chart containers to apply consistent styling.
- qld__chart-text-center: Used to apply the text center plugin, which displays text in the center of donut charts.
- qld__chart-icon-center: Used to apply the icon center plugin, which displays an icon in the center of donut charts.
- labels: Used to indicate that the chart should generate labels.
- labels-percentage: Used to indicate that the chart should generate labels with percentages.
- sr-only: Used to visually hide elements but keep them accessible to screen readers.
- qld__legend-container: Class that styles the accessible chart legend must be inclided on a div with a unique id under the canvas element.
- solid-x-axis: placed on the canvas element this class applies a plugin that emphasises the x axis of that chart, use this to highlight the axis if its associated with major categories.
- solid-y-axis: placed on the canvas element this class applies a plugin that emphasises the y axis of that chart, use this to highlight the axis if its associated with major categories.
Examples
Votes for Different Colors
This bar chart shows the number of votes for different colors. Red has 12 votes, Blue has 19 votes, Yellow has 3 votes, Green has 5 votes, Purple has 2 votes, and Orange has 3 votes.
Click or press Enter on the legend items to toggle the visibility of each data series.
Completion Percentage
This donut chart shows a single percentage value.
Muliple Value Donut chart
Proportion Female/Male - QLD
52% Male
48% Female
This doughnut chart shows the proportion of males and females. Males are 52%, Females are 48%.
Public vs Private
89.4% Private
10.6% Public
This doughnut chart shows the proportion of public and private specialists. Private is 89.4%, Public is are 10.6%.
Trends over Time
This line chart shows trends over time.
Click or press Enter on the legend items to toggle the visibility of each data series.
Trends over Time
This area chart shows trends over time.
Click or press Enter on the legend items to toggle the visibility of each data series.
Average times
This line chart shows trends over time.