Highcharts Data Widget

The Highcharts widget is sponsored by Human Resources for the Web Accessibility Staff Organization.

Overview

The Highcharts widget allows you to embed accessible, interactive data visualizations created using Highcharts Cloud. Dozens of chart types and variations are available, including line, spline, area, column, bar, pie, and scatter charts. You can try HighCharts cloud without creating an account, create a free account with unlimited charts for ease of editing and updating, or if needed create a paid account to access advanced features such as teams, custom themes, API access, and webhooks. When using the free tier, your embedded chart will include a "Powered by Highcharts Cloud" link.

Below is some basic information to get you started. See Highcharts Cloud documentation for full instructions.

Accessibility

All the standard Highcharts Cloud chart types include accessibility support that enables interacting with the chart using the keyboard, a screen reader, or other assistive technology. Custom charts created using advanced features or custom themes may not be accessible. Use the built-in chart types and theme colors for best accessibility.

To help ensure accessibility of your embedded charts, only use one embedded chart per page. If more than one chart is used per page, the "View on Highcharts cloud" link text provided by Highcharts will not be unique enough (see Give your links unique and descriptive names). 

Data sources and restrictions

You can paste data from Excel, Google Sheets, or CSV files into Highcharts Cloud, or connect directly to a published Google Sheet. UC Berkeley's standard data protection policies apply. Sensitive data is not allowed.

Configuration options

By default, your embedded chart will include a menu with image export, data viewing, and data download options. One of the options is "Open in Highcharts Cloud." If a visitor chooses this option, they will not be able to edit your embedded chart or its data. Highcharts creates a copy of the chart for them. To remove this menu, go to "Customize" and select "Exporting." Uncheck the "Enable exporting" button. This menu is all-or-nothing; there is no way to allow exporting an image without also allowing data download and opening a copy of the chart.

Highcharts visualizations are cached by their server. It is best to make configuration changes before you first publish your chart to ensure that the changes are in effect when you create your widget.

How to add a Highcharts widget

To add this widget, once you are in "Customize this Page" mode, click on the plus sign (+) to add a widget, and then select "Embeddable Content":

screen view of embeddable content selection button

Then, click "Highcharts Data":

From here, configure the Highcharts widget. Check "Override Title" to add a new title if desired (optional). Copy and paste the link or embed code (iFrame code or Share URL) provided by Highcharts Cloud into the "link or embed code" field (required). If necessary, change the pre-filled number in the "Height" field in order to best fit the individual visualization. Click "Save" when you're finished making the changes to the individual widget, then click "Save" at the bottom of the page to complete the process.