Skip to main content Skip to footer

Learning Centre

Adding Charts to Widgets

Citizen Portal provides the ability for our City Administrators to add their own charts to the expanded view of formatted widgets. Charts can be used for location widgets and integration widgets. The content of these charts depends on what information the city sends back in the API for the expanded view. 

Adding a Chart

To add a chart to a location or an integration widget, you need to:

  1. Follow the instructions for adding an integration or location-based widget
  2. Select the "Formatted widget" from the "Widget sub-types" field in the Configuration menu
  3. In the "Content" section, select “Add Chart +”
  4. Complete the chart details 

Chart details

Once you've selected "Add Chart+", you can customize the way the chart will appear in Citizen Portal. Review each of the fields and learn how to complete the set-up process.

Select the chart type you would like to add from the dropdown list. You may select from five different types of charts:

  • Vertical bar chart
  • Horizontal bar chart
  • Line chart
  • Pie chart
  • Doughnut chart

Based on the type of chart selected, you will be able to see a preview of how this chart will look to users.

Enter the chart title in the text field. Please note that the chart title should match the key in the API response.

Please note that this is an optional field. If you would like to provide a chart subtitle, enter the subtitle in the text field. The chart subtitle will appear below the chart title.

By default, a colour scheme will be chosen. You may select an option from the radio buttons provided to either select an existing colour scheme or create your own colour scheme.

To use an existing colour scheme:

  1. Choose the "Existing colour" radio button
  2. Choose a colour scheme from the dropdown menu

To create a custom colour scheme:

  1. Select the "create custom colour scheme" radio button
  2. Add the hex code for each colour you would like in your colour scheme in the text fields

Saving chart details

Once you have completed all chart details, select the “Add” button to add the chart to the widget. An entry will be added to the table below the “Add chart” button from the "Content" section.

Editing and deleting charts

To edit or delete the chart, select the "Actions" dropdown menu next to the chart. From the dropdown menu, select "Edit" to open the chart details and make any necessary edits, or select "Delete" to remove the chart from the widget.