Opacity Issue with scrollablePlotArea.opacity in Highcharts Custom Visual

Q&A
, , , ,
1

Hello Quick Sight Community,

I am developing a Gantt chart using a Highcharts custom visual (xrange chart type) and have run into an issue with the scrollablePlotArea feature.

Goal: My goal is to display a large number of data series without the chart becoming squashed. The scrollablePlotArea feature is perfect for this.

Problem: While the scrolling itself works well, the scrollablePlotArea.opacity property is not being applied correctly. The data series outside the visible frame are rendered without opacity, making them difficult to see. My attempts to set the opacity to 0.8 have had no effect.

Question: Is this a known bug or limitation in the Quick Sight implementation of Highcharts? If so, does a workaround exist to control the opacity of the ā€œout-of-frameā€ data when using scrollablePlotArea?

Iā€™ve attached screenshots showing the default transparent effect versus the desired opaque effect. Thank you for your help!Here is the code I used from xrange gantt chart sample in Demo Central:

{
  "chart": {
    "type": "xrange",
    "scrollablePlotArea": {
      "minHeight": 1000,
      "scrollPositionY": 0,
      "opacity": 0.2
    }
  },
  //X range default legend doesn't support series colors.
  //Hence, using subtitle to create a custom legend.
  //Color is fed in using html styling done in LegendText calculation.
  //This does take away legend interactivity; If that is important,
  //comment/remove subtitle and set legend.enabled to true below.
  "subtitle": {
    "text": ["join", ["unique", ["getColumn", 6]], "    "],
    "align": "center",
    "verticalAlign": "bottom",
    "y": 10,
    "useHTML": true
  },
  "legend": {
    "enabled": false
  },
  "xAxis": {
    "type": "datetime"
  },
  "yAxis": {
    "title": {
      "text": ""
    },
    "categories": ["Prototyping", "Development", "Testing"],
    "reversed": true
  },
  "series": [
    "map", //Iterate through each project
    ["unique", ["getColumn", 0]], //Project 1, 2 & 3
    {
      "name": ["item"],
      "pointWidth": 20,
      "dataLabels": { "enabled": true },
      "data": [
        "map", //Iterate through below filtered dataset
        [
          "filter",
          ["getColumn", 0, 1, 2, 3, 4, 5], //Project, ProjectColor, Phase, Start and end date
          ["==", ["get", ["item"], 0], ["item", 2]] //Where Project = Project from outer map
        ],
        {
          "x": ["get", ["item"], 3],
          "x2": ["get", ["item"], 4],
          //Xrange chart's y axis expects numeric values - even for categories.
          //Hence, converting Phase to category index using case statement.
          "y": [
            "case",
            ["==", ["get", ["item"], 2], "Prototyping"],
            0,
            ["==", ["get", ["item"], 2], "Development"],
            1,
            ["==", ["get", ["item"], 2], "Testing"],
            2
          ],
          "partialFill": ["get", ["item"], 5],
          //Though assigned at point level, this is really series colors.
          //Ensure that all rows of a project has same color specified in dataset.
          "color": ["get", ["item"], 1]
        }
      ]
    }
  ]
}

Quick Sight Output:

Screenshot 2025-09-10 at 10.39.31 AM
Screenshot 2025-09-10 at 10.39.31 AM3328Ɨ1654 404 KB

HighChart Expected Output:

Screenshot 2025-09-10 at 10.40.04 AM
Screenshot 2025-09-10 at 10.40.04 AM2530Ɨ1380 308 KB

1 Like
2

Hi @weiwei.chi and welcome to the Quick Sight community!

Itā€™s very possible that this is a feature of highcharts that hasnā€™t been implemented in Quick Sight yet as there are still a number of standard highchart options that have not been introduced yet and this seems like it may be one of those things.
From experience of working with highcharts and adding in a scrollable plot area; there were some issues of working with the gutter that held the scroll bar.
Reviewing your code, it does not look like there are issues, which also leads me to believe that this is a limitation.

One work around you could try out to see if it works; would be to force an opaque background and fully cover areas outside the viewpoint. Hopefully preventing series from showing if theyā€™re ā€˜out of frameā€™..may look something like:
"chart": {
"type": "xrange",
"backgroundColor": "#FFFFFF",
"plotBackgroundColor": "#FFFFFF",
"scrollablePlotArea": { "minHeight": 1000, "scrollPositionY": 0, "opacity": 1 }
}

Let me know if this could serve as a work around or not; either way Iā€™ll mark this as a feature request to promote visibility to the support team.

2 Likes
3

Hi @Brett

Thank you for the prompt reply. Your suggestion works perfectly for a fully opaque background.

Is there a list where we can find which features of HighChart are fully support in Quick Sight? Weā€™re interested in knowing which are fully supported and which may have limitations.

Appreciate it!

2 Likes
4

Hi @weiwei.chi,

Iā€™m glad the work around handled your scenario! While I havenā€™t been able to locate documentation that states the currently available highchart options; when trying to create a chart type that was not accepted yet, I received the following error message:

image

2 Likes