Skip to Main content

Content Types & Databases

Content Types & Databases
Home / [Admin] OFM Support & Training Hub / Content Types & Databases / Visualizer Charts Guide

Visualizer Charts

In This Section

Updating Existing Charts
Creating New Charts
Visualizer Resources
Accessibility

Updating Existing Charts

All Workforce Data charts have been created as of 13 October 2025. Instructions below will outline how to update any of the existing charts on the OFM site.

Note: if any existing chart needs to be maintained for historical reference (as opposed to updating it with new data), copy the chart by clicking the Duplicate Icon first, then follow the steps to edit the duplicate.

1. Navigate to the Visualizer section of the admin panel

2. In the Visualizer Library, find the chart that needs to be updated and click the gear icon to edit

Note: if you had to duplicate an existing chart, you’ll need to update the Backend chart title for internal usage field to differentiate the respective charts.

3. The chart should default load to the Manual Data tab

4. In the Manual Data entry tab, you can select the entry format – we recommend selecting the Excel option from the dropdown (if not already selected) and click the Edit Data button. This will open a spreadsheet view with the data outlined in its respective cells

5. You are then able to delete/edit content from a cell and add new data, as needed. Once all new data has been entered, click the Show Chart button to see a preview of the updated data.

6. Once the data is updated, you’ll likely need to update the Chart Description field.

  • Navigate to the Settings tab
  • Open the General Settings option
  • Open the Title tab option
  • Type in the content to your Chart Description field

7. If there are additional changes you’d like to make to the chart, find and select other tabs to change other settings. If no other changes, click the Save Chart button to update the chart on the frontend

  • This will automatically adjust the chart on the frontend with the updated content

Note: if you duplicated this chart, you will need to replace the current chart on the frontend webpage with the latest chart

8. Verify the chart is updated on the content page of the OFM website by visiting the frontend webpage where the chart was added

Creating New Charts

TIP: If you can find the same type (e.g. Column, Pie) of chart, duplicate it, then edit from there by following the Updating Existing Charts section instructions.

If you cannot find the same type of chart in use, then start by clicking the Add New button to create a new chart.

There are 3 different chart libraries available in the Visualizer tool, we will primarily use the Google Charts library and one chart type in the ChartJS library. Select the chart you’d like to display on the site, then click Next.

The following fields and settings are required:

  • Backend chart title for internal usage field = Chart Title for admin panel view

  • Data entry = Source Tab

If this is a brand new chart, you will want to use the Import data from file** option

  • Click the Choose File button to select a file
  • Once selected from your device’s options, click Import

**Before you import/upload the file, you will first need to make edits to your CSV document. You will need to add labels for your data sets to the document before importing the file to the Visualizer chart.

  • You will likely only ever need to add “string” or “number” to your documents
    • String = text content
    • Number = number data
  • Each Visualizer chart setting option will provide an example CSV you can review (shown in the megaphone icon notes)
  • For example: I added the highlighted row to my CSV document to outline that the City is text content and each Population column was number data

After importing the data, I would recommend clicking the Save Chart button to keep your data changes. This will refresh the page, and prompt you to select and reopen the chart you were editing – click the gear icon to get back into the chart editing options.

Settings tab > General Settings 

  • Title > Chart Description
  • Font Styles
  • Legend
  • Tooltip
  • Lazy rendering of chart
    • Recommendation: enable this option; this manages the frontend load time for the content page

Settings tab > Horizontal Axis Settings 

  • General Settings
    • Axis Title
    • Slanted Text
    • Slanted Text Angle = not required, but nice to adjust if you enabled Slanted Text

Settings tab > Vertical Axis Settings 

  • General Settings
    • Axis Title
  • Grid Lines = not required

Note: the axis settings might vary, depending which type of chart you’re creating

Settings > [type] Settings (e.g. Bars) 

  • Focus Target
  • Is Stacked
  • Bars Opacity

Note: these settings will vary based on the type of chart you are creating (e.g. could be Slice Settings for a Pie type chart)

Settings > Series Settings (Column Type example) 

  • Each column available with data will have these options
    • Visible In Legend
    • Color
    • Special Role
  • These will impact how the Columns are displayed on the chart

Settings > Frontend Actions 

  • Enable each action you would like a frontend user to have when viewing the chart
    • Recommendation: all checkboxes should be selected

All other Settings listed are optional and do not have any fields that are required to be filled in, so you can move forward with clicking the Create Chart button to save all adjustments.

How to add the chart to your content page

Use the Chart icon in the Text Block toolbar

  • Add/Edit the Text Block module
  • Click the Insert Chart icon
  • Select the Chart you want to add to the page and click Insert
  • Click Update on the content page to save the changes

After you insert the chart, include the Chart Title above the shortcode in the Text Block module.

  • You can edit this by typing directly into the Text Block editor

Visualizer Resources

Additional resources for the Visualizer tool

Primary Color Palette

  • OFM Indigo = #464BA0
  • Rainier Blue = #7B9DD2
  • Climate Green = #B7C933
  • Eastern Orange = #E07627

Secondary Color Palette

  • Puget Sound Blue = #2F3251
  • Salish Sky = #77CDD0
  • Evergreen = #339678
  • Pink Lady = #C2095A
  • Capitol Gray = #C9D5E8
  • Yakima Sunshine = #EEB927

*Use the italicized hex codes for your larger slices of pie charts. They are darker fill colors that allow for higher contrast to white font percentage labels.

**Try to alternate between darker and lighter colors when adding multiple bars or lines to your chart to see the contrast between each data set.

Plugin support documentation links

Accessibility

How these charts meet accessibility requirements

Overview: aspects related to a chart’s accessibility requirements have been automated; this means, there are few action items needed from the OFM team when creating/updating charts.

Action item for OFM: include/update the Chart Description field in the General Settings tab on a chart

Bilberrry has implemented

  • Automatic fallback chart creation on the frontend
  • Keyboard accessibility to focus on table(s)
  • Additional frontend chart options through the Visualizer plugin
  • Chart description is “readable” by screen readers in the code

Chart Description Resources

Here is a resource that breaks down the elements of a text summary for complex data visualizations. For each chart, the State HR team will need to provide:

  • Alt text
  • Caption / summary of the chart (scroll down to the section called Caption), which should include:
    • Graph title
    • Chart or graph type
    • Goal of visualization (what data is it showing?)
    • How to read or navigate it
    • Summary of important trends