Grouped stacked column with HighCharts

Q&A
, ,
1

Dear all,

I am struggling to translate this vertical stacked bar chart to the HighCharts equivalent:

image
image1559Ă—330 9.01 KB

The underlying data has three fields:

  • Group by index 0: MetricAggregation (calculated field that either results in countries or cities)
  • Group by index 1: MetricType (cooling, electricity, etc.)
  • Value index 0 (total 2): MetricValueUnitConverted (numeric value)

The best that I came up with is this (sorry, I can only apparently embed 1 screenshot :-1:): Vertical bar chart without stacking. Bars are next to each other.

However, there is no stacking yet and due to missing values in the water category (null value for one row), the bars don’t match the x-axis (tooltip correctly states Switzerland, but the column is shown at South Africa).

This is the underlying JSON configuration:

{
  "xAxis": {"categories": ["getColumn", 0]},
  "yAxis": { "title": { "text": null } },
  "series": [
    "map",
    [
      "unique", ["getColumn", 1]
    ],
    {
      "type": "column",
      "name": ["item", 1],
      "stack": ["item", 0],
      "data": [
        "map",
        [
          "filter",
          ["getColumn", 0, 1, 2],
          ["==", ["get", ["item"], 1], ["item", 2]]
        ],
        [
          ["get", ["item"], 0],
          ["get", ["item"], 2]
        ]
      ]
    }
  ],
  "legend": { "enabled": true }
}

I know that “stack”: [“item”, 0] is wrong, but I do not know how to loop over the unique entries in getColumn=1 [these would be cooling, electricity, etc.] and the unique entries in getColumn=0 [equivalent to countries or cities, basically the x-axis labels].

Regarding the mismatch shown above for Switzerland / South Africa: I tried to change the result of the data mapping to be a dictionary defining x and y as follows. However, doing so does not render anything besides the legend.

{
  "x": ["get", ["item"], 0],
  "y": ["get", ["item"], 2]
}

Your support is very much appreciated!

Thanks in advance,

Thomas

2

Hi @ThomasS,

Nice seeing you back in the Quick Community! Just so I can understand your use case a little more, is there a specific reason you want to use HighCharts to translate your existing stacked bar chart (whether it is for a future use case or simply to try out Highcharts)? If not, I would recommend sticking with that due to the stacking capability not present.

3

Hello @WLS-Luis ,

Thank you for your response!

We like the HighCharts flexibility and also the “look-and-feel”. As we embed dashboards in our web application, we can see clear differences in the axes labels of a HighCharts visual and a “traditional” visual. The former seems to be a vectorized graphic while the latter seems like a pixel graphic, thus appearing blurry (hard to describe, but easy to see).

It all originated when we were missing features (e.g. rectangle zoom) that were easy to implement with HighCharts. When you then have one “premium” visual, it makes the rest stand out negatively…

Best wishes,

Thomas

4

Hi @ThomasS,
I’m not 100% sure on this but wondering if your stack code needs to be placed within plot options like the following code:

image
image762Ă—428 36.1 KB

5

Hi @Brett ,

Thanks! This already goes into the right direction. The last issue seems to be with the alignment on the x-axis. For instance, I have 3 stacks that should correspond to “Switzerland” (see the following collection of screenshots, top is the current result with partially successful stacking, bottom displays 3 tooltips when hovering over this widget) but they are shown and stacked on the neighboring entries:

image
image890Ă—575 42.3 KB

Any suggestion on how to fix this last issue?

I tried to switch from the current

[
  ["get", ["item"], 0],
  ["get", ["item"], 2]
]

to defining a dictionary (as should be possible based on the highcharts API: series.column.data | Highcharts Core JS API Reference), but this did not produce any visual at all. I was then only able to see a white space followed by the legend , which correctly showed all entries depicted above.

{
  "x": ["get", ["item"], 0],
  "y": ["get", ["item"], 2]
}

Thanks again for your support, I strongly appreciate it!

Best wishes,

Thomas

6

Hi @ThomasS,
A few additional notes to add regarding highcharts specifically within Quicksight;

  • The highcharts feature that is available in Quick is more of a Core Library access so there are limitations in what you can achieve in comparison to a full version of highcharts. Therefore the documentation available through the highcharts website does not always translate into QS’s version as it’s different.
  • Also, highchart visuals in QuickSight may face limitations when it comes to interactivity, filtering, navigating, color setting and some other features that the standard visualizations allow.

There’s a step by step breakdown with some additional sample codes for various chart types that you can utilize at the following link:

https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual

Here’s where you can find a more in depth breakdown of the available expression language in QuickSight’s version: