Using Highcharts

Open the QuickSight console.

Open the QuickSight analysis that you want to add a Highcharts visual to.

On the application bar, choose Add, and then choose Add visual.

On the Visual types pane, choose the Highcharts visual icon. An empty visual appears on the analysis sheet and the Properties pane opens on the left.

In the Properties pane, expand the Display settings section and perform the following actions:

1. For Edit title, choose the paintbrush icon, enter the title that you want the visual to have, and then choose SAVE. Alternatively, choose the eyeball icon to hide the title.

2. (Optional) For Edit subtitle, choose the paintbrush icon, enter the subtitle that you want the visual to have, and then choose SAVE. Alternatively, choose the eyeball icon to hide the subtitle.

3. (Optional) For Alt text, add the alt text that you want the visual to have.

Expand the Data point limit section. For Number of data points to show, enter the number of data points that you want the visual to show. Highcharts visuals can show up to 10,000 data points.

Expand the Chart code section, shown in the following image.

Enter a JSON schema into the Chart code JSON editor. The editor provides contextual assistance and real time validation to ensure that your input JSON is configured properly. Any errors that QuickSight identifies can be viewed in the Errors dropdown. The example below shows a JSON schema that creates a lipstick chart that shows current year sales by industry.

{
  "xAxis": {
    "categories": ["getColumn", 0]
  },
  "yAxis": {
    "min": 0,
    "title": {
      "text": "Amount ($)"
    }
  },
  "tooltip": {
    "headerFormat": "<span style='font-size:10px'>{point.key}</span><table>",
    "pointFormat": "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>${point.y:,.0f}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true
  },
  "plotOptions": {
    "column": {
      "borderWidth": 0,
      "grouping": false,
      "shadow": false
    }
  },
  "series": [
    {
      "type": "column",
      "name": "Current Year Sales",
      "color": "rgba(124,181,236,1)",
      "data": ["getColumn", 1],
      "pointPadding": 0.3,
      "pointPlacement": 0.0
    }
  ]
}

Choose APPLY CODE. QuickSight converts the JSON schema into a visual that appears in the analysis. To make changes to the rendered visual, update the appropriate properties in the JSON schema and choose APPLY CODE. The image below shows the lipstick chart that is created with the JSON schema from the previous step.

(Optional) Open the Reference dropdown to access links to helpful Highctarts reference material.