Overview: Why This Chart?
Amazon QuickSight offers a robust set of native charts, but certain business scenarios demand more tailored visualizations. One common requirement is a Highlighting Chart - ideal for showcasing filtering or categorical data with a clean, minimalist design. These charts are often easier to interpret than dense bar charts and add a distinctive aesthetic to your dashboards.
In this tutorial, we’ll address the challenge of building a Highlighting Highchart that isn’t natively available in QuickSight. By leveraging HighCharts within QuickSight’s custom visual capabilities, we’ll create an interactive chart from the ground up. The final visualization will allow users to click on a data point and dynamically highlight related visuals on the same dashboard sheet, enhancing interactivity and user experience.
Prerequisites and Data Model
To build this chart, you must have the Highlight on Selection option available in your QuickSight analysis:
Edit → Analysis Settings → Interactivity → On selection
Your dataset should contain at least two fields structured as follows:
| Field Name | Data Type | Purpose/Role in the Visual |
|---|---|---|
| Region | String | Provides the text labels for each Column (e.g., project name, category). |
| Colour | String | To act as a legend. This should be a hex code (e.g., #4CAF50) or a named colour (green). |
Step-by-Step Implementation Guide
1. Start the HighCharts Visual
From your analysis sheet, select Add visual from the top menu. Scroll down in the Visual types pane and choose the HighChart visual icon.
2. Configure Field Wells
With the custom visual selected, configure the Field Wells as follows. This step is crucial for mapping your data to the JSON code.
-
Drag your category field (e.g., Region) into the Value field well.
-
Drag your colour field (e.g., Colour) into the Value field well.
Note: The order matters. Region should be the first field in the well ([“getColumn”, 0]) and Colour should be the second ([“getColumn”, 1])
3. The JSON Code Breakdown
In the Format visual pane, select Chart code. Delete the placeholder code and paste the following complete JSON.
For the HighChart to respond to highlighting:
For the HighChart to send a selection to trigger highlight on other visuals add this code to the series section:
How it works:
-
“events”: { “click”: … } tells Highcharts to listen for a click action on any data point in the scatter plot series.
-
[“triggerClick”, …] is a special QuickSight expression that simulates a click action on a native visual.
-
{ “rowIndex”: “point.index” } is the payload. It tells QuickSight which data row was clicked. point.index dynamically gets the index of the clicked data point, ensuring that the correct row in your dataset is selected for filtering.
When a user clicks a Bar, QuickSight receives this event and applies a filter to the dashboard, just as if the user had clicked a bar in a standard bar chart.
Takeaway
By leveraging QuickSight’s HighChart capabilities, we can move beyond the native chart library and build highly specific, interactive visuals like this which supports Highlighting. This not only enhances the user experience but also allows you to present data in the most effective format for your business needs.