Hi everyone,
This is my first post here, so apologies for any mistakes or formatting issues!
I’m building a custom Highcharts visualization inside Amazon QuickSight and running into some challenges.
Goal: One visual that dynamically shows 1–4 axes based on selected data points in controls, including a legend. The visual should display Y-axes based on the parameters selected in controls. If multiple data points share the same unit (e.g., several temperature values in Celsius), they should appear on the same axis, but as separate lines with individual legend entries.
Setup:
-
SPICE enabled
-
Data source: Athena
-
Using custom Highcharts for rendering.
-
Columns:
timestamp,description,value,unit, etc.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Methanol Consumption | LITER | 2025-01-01T08:07:12.000Z | 50 |
| Gas Consumption | CUBICMETER | 2025-01-01T08:07:12.000Z | 300 |
| Energy Consumption | KWH | 2025-01-01T08:07:13.000Z | 2500 |
| Methanol Consumption | LITER | 2025-01-01T08:07:13.000Z | 51 |
| Temperature (Furnace 1) | CELSIUS | 2025-01-01T08:07:12.000Z | 371 |
| Temperature (Furnace 2) | CELSIUS | 2025-01-01T08:07:13.000Z | 801 |
-
Unit Control: Allows users to select one or multiple measurement units (e.g., °C, kWh, %, etc.).
-
Description Control: Lets users choose one or multiple data point descriptions (e.g., “Temperature”, “Energy Consumption”, etc.).
-
These controls are tied to QuickSight parameters, which dynamically filter the dataset.
-
A timestamp filter control.
Issues I’m facing:
-
Automatic aggregation: QuickSight aggregates values by default, but I need to show every single record exactly as it is.
-
Multi-value parameter logic: When the control is set to “All values,” my
getParameterValue()logic breaks for multi-select parameters. -
Dynamic axes and titles:
-
Axes should appear or disappear depending on how many units are selected.
-
Titles should update dynamically based on selected parameters.
-
If multiple data points share the same unit, I need multiple legend entries, but I cannot use
uniqueandmapwith dynamic axes.
-
Sorry for not providing a sample dashboard as my controls dynamically change the SQL query, and this isn’t possible in QuickSight’s Arena environment.
Here’s what I have so far:
{
"xAxis": {
"type": "datetime",
"gridLineWidth": 1
},
"yAxis": [
{
"title": {
"text": ["get", ["getParameterValue", "Unit"], 0]
},
"labels": {
"enabled": ["get", ["getParameterValue", "Unit"], 0],
"style": {
"color": "#035970"
}
},
"opposite": false
},
{
"title": {
"text": ["get", ["getParameterValue", "Unit"], 1]
},
"labels": {
"enabled": ["get", ["getParameterValue", "Unit"], 1],
"style": {
"color": "#8D1E77"
}
},
"opposite": true
},
{
"title": {
"text": ["get", ["getParameterValue", "Unit"], 2]
},
"labels": {
"enabled": ["get", ["getParameterValue", "Unit"], 2],
"style": {
"color": "#E96D0C"
}
},
"opposite": false
},
{
"title": {
"text": ["get", ["getParameterValue", "Unit"], 3]
},
"labels": {
"enabled": ["get", ["getParameterValue", "Unit"], 3],
"style": {
"color": "#508130"
}
},
"opposite": true
}
],
"tooltip": {
"xDateFormat": "%d.%m.%Y %H:%M:%S",
"headerFormat": "<span style=\"font-size: 13px; font-weight: bold;\">Datum: {point.key} <br/>Beschreibung: {series.name}</span><br/>",
"pointFormat": "<b>Messwert:</b> {point.y} {point.unit}"
},
"series": [
{
"type": "scatter",
"color": "#035970",
"yAxis": 0,
"data": [
"map",
[
"filter",
["getColumn", 0, 3, 2, 1],
[
"==",
["get", ["item"], 2],
["get", ["getParameterValue", "Unit"], 0]
]
],
{
"x": ["get", ["item"], 0],
"y": ["get", ["item"], 1],
"unit": ["get", ["item"], 2],
"name": ["get", ["item"], 3]
}
]
},
{
"type": "scatter",
"color": "#8D1E77",
"name": ["get", ["getParameterValue", "Unit"], 1],
"yAxis": 1,
"data": [
"map",
[
"filter",
["getColumn", 0, 3, 2, 1],
[
"==",
["get", ["item"], 2],
["get", ["getParameterValue", "Unit"], 1]
]
],
{
"x": ["get", ["item"], 0],
"y": ["get", ["item"], 1],
"unit": ["get", ["item"], 2]
}
]
},
{
"type": "scatter",
"color": "#E96D0C",
"name": ["getParameterValue","Desc"],
"yAxis": 2,
"data": [
"map",
[
"filter",
["getColumn", 0, 3, 2, 1],
[
"==",
["get", ["item"], 2],
["get", ["getParameterValue", "Unit"], 2]
]
],
{
"x": ["get", ["item"], 0],
"y": ["get", ["item"], 1],
"unit": ["get", ["item"], 2]
}
]
},
{
"type": "scatter",
"color": "#508130",
"name": "Neue Serie 4",
"yAxis": 3,
"data": [
"map",
[
"filter",
["getColumn", 0, 3, 2, 1], // 0: timestamp, 3: value, 2: Unit, 1: Description
[
"==",
["get", ["item"], 2],
["get", ["getParameterValue", "Unit"], 3]
]
],
{
"x": ["get", ["item"], 0],
"y": ["get", ["item"], 1],
"unit": ["get", ["item"], 2]
}
]
}
]
}
Thanks so much for taking the time to read this—I’d love to hear your thoughts!