Workaround on Quick Sight Funnel Chart with Highchart Visual

Q&A
, ,
1

I’ve created a Custom Funnel Chart with Highchart Visual using the below code..

{
  "chart": {
    "type": "funnel"
  },
  "title": {
    "text": "Data Flow"
  },
  "lang": {
    "thousandsSep": ","
},
  "xAxis": {
    "categories": ["getColumn", 0],
    "labels": {
        "formatter": ["formatValue", "count", 0]
        },
  },
  "tooltip": {
        "pointFormat":"{series.name}: <b>{point.percentageOfTotal:.1f}%</b>"
    },

  "plotOptions": {
    "funnel": {
      "minSize": "100",
      "borderRadius": 3,
      "height": "90%",
      "neckWidth": "30%",
      "neckHeight": "35%",
      "slicedOffset": 10,
      "borderWidth": 4,
      "borderColor": "#FFFFFF",
      "dataLabels": {
        "color": "#FFFFFF",
        "enabled": true,
        "inside": true,
        "crop": false,
        "overflow": "justify",
        "nullFormat": "No data",
        "softConnector": true,
        "filter": {
            "property": "realValue",
            "operator": ">",
            "value": 4
                },
        "useHTML": true,
        "format": "<b>{point.name}</b><br><div style='text-align: center;'>{point.realValue:,.0f} ({point.percentageOfTotal:.2f}%)</div>",
        "style": {
          "fontSize": "10px",
          "textOutline": "none",
          "fontWeight": "bold",
          "lineHeight": "12px"
        }
      }
    }
  },
  "colors": [
    "#5B8FF9",
    "#61DDAA",
    "#65789B",
    "#F6BD16",
    "#7262FD",
    "#78D3F8",
    "#9661BC",
    "#F6903D",
    "#E86452",

    "#2FC25B",
    "#F04864",
    "#1890FF",
    "#13C2C2",
    "#8543E0",
    "#3436C7",
    "#223273",
    "#1BA784",
    "#F5222D",

    "#A0D911",
    "#FA541C",
    "#722ED1",
    "#52C41A",
    "#FFC53D",
    "#597EF7",
    "#73D13D",
    "#9254DE",
    "#36CFC9",
    "#FF7A45"
  ],
  "series": [
    {
      "type": "funnel",
      "name": "Data Flow",
      "data": [
        "map",
        ["getColumn", 0, 1, 2],
        {
          "name": ["get", ["item"], 0],
          "y": ["ln", ["get", ["item"], 1],1000],
          "realValue": ["get", ["item"], 1],
          "percentageOfTotal": ["*", 100, ["get", ["item"], 2]]
        }
      ],
      "dataLabels": {
      "enabled": true,
      "nullFormat": "No data"
      },
      "nullInteraction":true

    }
  ]
}

I have a requirement that, if a stage in funnel having value 0 also i wanted to show that in the funnel.

By default 0 value stages are vanishing from the funnel chart.

My workaround:

For this problem I created a calculated field, with the below formula

ifelse{ count_col=0, 10, count_col}

so with this condition always the bar for the 0 value stages are also visible. But I want to fake the data label as well. I don’t want to show 10, I want to show 0.

For now I hidden the data labels which ever percentage is 0%. But I want to show the labels as 0, not the fake value 10. Is anyone worked or familiar with funnel chart using highchart pls guide me whether it is possible to achieve or not.

Screenshot 2026-04-29 143619
Screenshot 2026-04-29 143619430×556 11.5 KB

2

Hi @Karthika_G1 and welcome to the Quick Community!

I believe the root of your issue is your ifelse() statement and how your highcharts json is written to interact with your ifelse() statement. I can think of 2 potential workarounds that may solve your issue. I do want to state that I am not able to replicate your exact instance so these might not be exact solutions.

For the first option, you can remove the ifelse calculated field entirely and use your raw count column. In the map expression, use a case conditional to substitute a tiny value for y when the count is 0, while keeping realValue at the true value:

“y”: [“case”, [“==”, [“get”, [“item”], 1], 0], 0.01, [“ln”, [“get”, [“item”], 1], 1000]], “realValue”: [“get”, [“item”], 1]

Since your format string already uses “{point.realValue:,.0f}”, it will should display 0 correctly.

For the second option, keep your ifelse approach but change the sentinel value from 10 to something tiny like 0.001: “ifelse(count_col = 0, 0.001, count_col)”. Since “ln(0.001, 1000)” produces a valid small value, the slice will render. And because your label format uses “{point.realValue:,.0f}”, the “:,.0f“ rounding will display 0.001 as 0.

When looking at your code, I think you’ll also need to update or remove your dataLabels.filter, which currently hides labels where “realValue > 4” isn’t met. Change it to “operator”: “>=” with “value”: 0, or remove the filter block entirely, otherwise your zero-value labels will stay hidden.

Hope this helps and let me know if you have any additional questions about this topic!

3

Hi @Karthika_G1,

Hope everything is well with you! Just checking in since this thread hasn’t received a response in a while. Was Jacob’s reply helpful to you or were you able to find a solution yourself in the meantime?

Feel free to let us know if anything needs more clarification or if you have further questions regarding this topic. If we don’t receive a response within the next 3 business days, I’ll go ahead and mark this thread as resolved.

Thank you.

4

Hi @Karthika_G1,

Since I haven’t received any further updates from you, I’ll treat this inquiry as complete at this time. Please feel free to create a new post if you have more questions.

Thank you