# Using Highcharts
Use Highcharts visuals to create custom chart types and visuals that use the [Highcharts Core library](https://www.highcharts.com/blog/products/highcharts/). Highcharts visuals provide Quick authors direct access to the [Highcharts API](https://api.highcharts.com/highcharts/).
To configure a Highcharts visual, Quick authors need to add a Highcharts JSON schema to the visual in Quick. Authors can use Quick expressions to reference Quick 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 Quick, see the [Highcharts Visual QuickStart Guide](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) in [DemoCentral](https://democentral.learnquicksight.online/#).
The following image shows a lipstick chart that is configured in the **Chart code** JSON editor of a Highcharts visual in Quick.
![\[alt text not found\]](http://docs.amazonaws.cn/en_us/quick/latest/userguide/images/highcharts-example1.png)
For more examples of visuals that you can create with the Highcharts visual in Quick, see [Highcharts demos](https://www.highcharts.com/demo).
## Considerations
Before you start creating Highcharts visuals in Amazon Quick, review the following limitations that apply to Highcharts visuals.
+ The following JSON values are not supported in the Highcharts **Chart code** JSON editor:
+ Functions
+ Dates
+ Undefined values
+ Links to GeoJSON files or other images are not supported for Highcharts visuals.
+ Field colors are not available for Highcharts visuals. Default theme colors are applied to all Highcharts visuals.
## Creating a Highcharts visual
Use the following procedure to create a Highcharts visual in Amazon Quick.
1. Open the [Quick console](https://quicksight.aws.amazon.com/).
1. Open the Quick analysis that you want to add a Highcharts visual to.
1. On the application bar, choose **Add**, and then choose **Add visual**.
1. 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.
1. 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.
1. (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.
1. (Optional) For **Alt text**, add the alt text that you want the visual to have.
1. 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.
1. Expand the **Chart code** section.
1. 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 Quick 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": "{point.key}",
"pointFormat": "| {series.name}: | ${point.y:,.0f} |
",
"footerFormat": "
",
"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
}
]
}
```
1. Choose **APPLY CODE**. Quick 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**.
1. (Optional) Open the **Reference** dropdown to access links to helpful Highctarts reference material.
When you are happy with the rendered visual, close the properties pane. For more information about Quick Sight specific expressions that can be used to configure a Highcharts visual, see [Amazon Quick JSON expression language for Highcharts visuals](highchart-expressions.md).
## Interactive Highchart features
Highchart visualizations in Amazon Quick Sight support custom actions, highlighting, and custom field color consistencies, allowing you to create interactive and visually cohesive charts that integrate seamlessly with other Quick Sight visuals.
### Custom actions
With custom actions, you can define specific behaviors for any data point in your Highchart visualizations. This feature seamlessly integrates with Quick Sight'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 Quick Sight 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 Quick'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 Quick Sight'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.
# Amazon Quick JSON expression language for Highcharts visuals
JSON expression language for Highcharts
Highcharts visuals accept most [valid JSON values](https://www.w3schools.com/js/js_json_datatypes.asp), standard arithmetic operators, string operators, and conditional operators. The following JSON values are not supported for Highcharts visuals:
+ Functions
+ Dates
+ Undefined values
Quick authors can use JSON expression language create JSON schemas for a highcharts visual. JSON expression language is used to bind JSON to APIs or datasets to allow dynamic population and modification of JSON structures. Developers can also use JSON expression language to inflate and transform JSON data with concise and intuitive expressions.
With JSON expression language, expressions are represented as arrays, where the first element specifies the operation and subsequent elements are the arguments. For example, `["unique", [1, 2, 2]]` applies the `unique` operation to the array `[1, 2, 2]`, resulting in `[1, 2]`. This array-based syntax allows for flexible expressions, that allow complex transformations on JSON data.
JSON expression language supports *nested expressions*. Nested expressions are expressions that contain other expressions as arguments. For example `["split", ["toUpper", "hello world"], " "]` first converts the string `hello world` into an uppercase, then splits it into array of words, resulting in `["HELLO", "WORLD"]`.
Use the following sections to learn more about JSON expression language for Highcharts visuals in Amazon Quick.
**Topics**
+ [
# Arithmetics
](jle-arithmetics.md)
+ [
# Array operations
](jle-arrays.md)
+ [
# Amazon Quick expressions
](jle-qs-expressions.md)
# Arithmetics
The following table shows arithmetic expressions that can be used with JSON expression language.
| Operation | Expression | Input | Output |
| --- | --- | --- | --- |
| Addition | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 |
| Subtraction | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 |
| Multiplication | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 |
| Division | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 |
| Modulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 |
| Exponentiation | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 |
| Absolute Value | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 |
| Square Root | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 |
| Logarithm (base 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 |
| Natural Logarithm | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 |
| Round | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 |
| Floor | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 |
| Ceiling | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 |
| Sine | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 |
| Cosine | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 |
| Tangent | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 |
# Array operations
JSON expression language allows generic array manipulation for the following functions:
+ `map` – Applies a mapping function to each element of an array and returns a new array with the transformed values.
For example, `["map", [1, 2, 3], ["*", ["item"], 2]]` maps each element of the array `[1, 2, 3]` by multiplying it by 2.
+ `filter` – Filters an array based on a given condition and returns a new array containing only the elements that satisfy the condition
For example, `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` filters the array `[1, 2, 3, 4, 5]` to include only the even numbers.
+ `reduce` – Reduces an array to a single value by applying a reducer function to each element and accumulating the result.
For example, `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` reduces the array `[1, 2, 3, 4, 5]` to the sum of its elements.
+ `get` – Retrieves a value from an object or an array by specifying a key or index.
For example, `["get", ["item"], "name"]` retrieves the value of the `"name"` property from the current item.
+ `unique` – Given an array returns only unique items inside this array.
For example, `["unique", [1, 2, 2]]` returns `[1, 2]`.
# Amazon Quick expressions
Amazon Quick offers additional expressions to enhance the functionality of Highcharts visuals. Use the following sections to learn more about common Quick expressions for highcharts visuals. For more information about JSON expression language in Amazon Quick, see the [Highcharts Visual QuickStart Guide](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) in [DemoCentral](https://democentral.learnquicksight.online/#).
**Topics**
+ [
## `getColumn`
](#highcharts-expressions-getcolumn)
+ [
## `formatValue`
](#highcharts-expressions-formatvalue)
## `getColumn`
Use the `getColumn` expressions to return values from specified column indices. For example, the following table shows a list of products alongside their category, and price.
| Product name | Category | Price |
| --- | --- | --- |
| Product A | Technology | 100 |
| Product B | Retail | 50 |
| Product C | Retail | 75 |
The following `getColumn` query generates an array that shows all product names alongside their price.
```
{
product name: ["getColumn", 0],
price: ["getColumn", 2]
}
```
The follwing JSON is returned:
```
{
product name: ["Product A", "Product B", "Product C"],
price: [100, 50, 75]
}
```
You can also pass multiple columns at once to generate an array of arrays, shown in the following example.
**Input**
```
{
values: ["getColumn", 0, 2]
}
```
**Output**
```
{
values: [["Product A", 100], ["Product B", 50], ["Product C", 75]]
}
```
Similar to `getColumn`, the following expressions can be used to return column values from field wells or themes:
+ `getColumnFromGroupBy` returns columns from the group by field. The second argument is the index of the column to return. For example, `["getColumnFromGroupBy", 0]` returns values of the first field as an array. You can pass multiple indices to get an array of arrays where each element corresponds to the field in the group by field well.
+ `getColumnFromValue` returns columns from the value field well. You can pass multiple indices to get an array of arrays where each element corresponds to the field in the values field well.
+ `getColorTheme` returns the current color pallete of a Quick theme, shown in the following example.
```
{
"color": ["getColorTheme"]
}
```
```
{
"color": ["getPaletteColor", "secondaryBackground"]
}
```
**Example**
![\[alt text not found\]](http://docs.amazonaws.cn/en_us/quick/latest/userguide/images/get-column-example.png)
`getColumn` can access any column from the table:
+ `["getColumn", 0]` - returns array `[1, 2, 3, 4, 5, ...]`
+ `["getColumn", 1]` - returns array `[1, 1, 1, 1, 1, ...]`
+ `["getColumn", 2]` - returns array `[1674, 7425, 4371, ...]`
`getColumnFromGroupBy` works similarly, but its index is limited to the columns in the group by field well:
+ `["getColumnFromGroupBy", 0]` - returns array `[1, 2, 3, 4, 5, ...]`
+ `["getColumnFromGroupBy", 1]` - returns array `[1, 1, 1, 1, 1, ...]`
+ `["getColumnFromGroupBy", 2]` - does not work, since there are only two columns in the group by field well
`getColumnFromValue` works similarly, but its index is limited to the columns in the value field well:
+ `["getColumnFromValue", 0]` - returns array `[1, 2, 3, 4, 5, ...]`
+ `["getColumnFromValue", 1]` - does not work, since there is only one column in the value field well
+ `["getColumnFromValue", 2]` - does not work, since there is only one column in the value field well
## `formatValue`
Use the `formatValue` expression to apply Quick formatting to your values. For example, the following expression formats the x-axis label with the format value that is specified in the first field of Quick field wells.
```
"xAxis": {
"categories": ["getColumn", 0],
"labels": {
"formatter": ["formatValue", "value", 0]
}
}
```