Services or capabilities described in Amazon Web Services documentation might vary by Region. To see the differences applicable to the China Regions, see Getting Started with Amazon Web Services in China (PDF).

Using Highcharts

Use Highcharts visuals to create custom chart types and visuals that use the Highcharts Core library. Highcharts visuals provide QuickSight authors direct access to the Highcharts API.

To configure a Highcharts visual, QuickSight authors need to add a Highcharts JSON schema to the visual in QuickSight. Authors can use QuickSight expressions to reference QuickSight fields, and formatting options in the JSON schema that they use to generate the Highcharts visual. The JSON Chart code editor provides contextual assistance for autocomplete and real time validation to ensure that the input JSON schemas are configured properly. To maintain security, the Highcharts visual editor does not accept CSS, JavaScript, or HTML code input.

For more information about Highcharts visuals in Amazon QuickSight, see the Highcharts Visual QuickStart Guide in DemoCentral.

The following image shows the Highcharts icon in QuickSight.

The following image shows a lipstick chart that is configured in the Chart code JSON editor of a Highcharts visual in QuickSight.

For more examples of visuals that you can create with the Highcharts visual in QuickSight, see Highcharts demos.

Considerations

Before you start creating Highcharts visuals in Amazon QuickSight, review the following limitations that apply to Highcharts visuals.

Creating a Highcharts visual

Use the following procedure to create a Highcharts visual in Amazon QuickSight.

When you are happy with the rendered visual, close the properties pane. For more information about QuickSight specific expressions that can be used to configrue a Highcharts visual, see Amazon QuickSight JSON expression language for Highcharts visuals.

Interactive Highchart features

Highchart visualizations in Amazon QuickSight support custom actions, highlighting, and custom field color consistencies, allowing you to create interactive and visually cohesive charts that integrate seamlessly with other QuickSight visuals.

Custom actions

With custom actions, you can define specific behaviors for any data point in your Highchart visualizations. This feature seamlessly integrates with QuickSight's existing action framework, enabling you to create interactive charts that respond to user clicks. The system currently supports single data point selection, giving you precise control over user interactions. Custom actions can be implemented across various chart types, including line charts, bar charts, and stacked bar charts, among others.

To implement custom actions, you'll need to modify your Highcharts JSON configuration. Add an event block to your series configuration, specifying the click event and the corresponding action. For example:

{
  "series": [{
    "type": "line",
    "data": ["getColumn", 1],
    "name": "value",
    "events": {
      "click": [
        "triggerClick", { "rowIndex": "point.index" }
      ]
    }
}]

This configuration enables click events on your chart's data points, allowing QuickSight to handle custom actions based on the selected data.

Cross-visual highlighting

Cross-visual highlighting enhances the interactivity of your dashboards by creating visual connections between different charts. When a user selects elements in one chart, related elements in other visuals are automatically highlighted, while unrelated elements are dimmed. This feature helps users quickly identify relationships and patterns across multiple visualizations, improving data comprehension and analysis.

To enable cross-visual highlighting and maintain field color consistency, use the quicksight clause in your Highcharts JSON configuration. This clause acts as a bridge between Highcharts rendering and QuickSight's visual interaction system. Here's an example of how to set it up:

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case", 
        ["dataMarkMatch", ["getColumnName", 0], "series.name"],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
      "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"]
    }]
  }
}

This configuration uses QuickSight's JSON expression language to dynamically modify visual properties like opacity and color based on user interactions and predefined color schemes.

For more complex scenarios, you can set up highlighting based on multiple conditions. This allows for more nuanced interactivity in your visualizations. The following example highlights elements based on either the quarter or day of the week:

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case",
        ["||",
          ["dataMarkMatch", "quarter", "series.name"],
          ["dataMarkMatch", "day_of_week", "point.name"]
        ],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
    }]
  }
}

Field-level color consistency

Maintaining visual coherence across your dashboard is crucial for effective data interpretation. The field-level color consistency feature ensures that colors assigned to specific dimensions perist across all visuals in your dashboard. This consistency helps users quickly recognize and track particular data categories across different chart types and views, enhancing the overall user experience and data comprehension.