Workaround for coloring legend in highcharts?

Question & Answer
, ,
1

I’ve found a workaround to apply the colours I need to my donut chart by using if statements but my legend is still showing the default quickSight colour palette and does not reflect the colours on the donut chart. Is there any workaround?

{
“chart”: {
“type”: “bar”,
“polar”: true
},

“pane”: {
“size”: “100%”,
“innerSize”: “50%”,
“endAngle”: 300
},

“xAxis”: {
“type”: “category”,
“categories”: [“unique”, [“getColumn”, 0]],

"labels": {
  "step": 1,
  "align": "right",
  "allowOverlap": false,
  "y": 3,

  "style": {
    "fontFamily": "Calibri, sans-serif",
    "fontSize": "16px"
  }
},

"lineWidth": 0,
"gridLineWidth": 0

},

“yAxis”: {
“lineWidth”: 0,
“showLastLabel”: true,
“gridLineWidth”: 0,
“labels”: {
“enabled”: false // Disables all labels on the y-axis
}
},

“plotOptions”: {
“bar”: {
“stacking”: “normal”,
“borderWidth”: 0,
“pointPadding”: 0,
“groupPadding”: 0.15,
“borderRadius”: “20%”
}
},

“series”: [
“map”,
//[“literal”, [“Customer data”, “Baseline data”]], // reversed stacking order
[“unique”, [“getColumn”, 1]], //source
{
“name”: [“item”], //source
“data”: [
“map”,
[
“filter”,
[“getColumn”, 0, 1, 2], //source, Persona, Value
[“==”, [“get”, [“item”], 1], [“item”, 2]] //Where Persona = source from outer map
],

    {
      "name": ["get", ["item"], 0], //source

      "y": ["get", ["item"], 2], //Percent
      "color": [
        "case",
        ["==", ["get", ["item"], 1], "Persona 1"],
        "#a784ff",
        ["==", ["get", ["item"], 1], "Persona 2"],
        "#50a2ff",
        ["==", ["get", ["item"], 1], "Persona 3"],
        "#00d4f2",
        
        "#000000" // Fallback/default color
      ]
    }
  ]
}

],

“tooltip”: {
“outside”: true,
“useHTML”: true,
“headerFormat”: “{point.x}
”,
“pointFormat”: “<span style="color:{point.color}">\u25CF {series.name}: {point.y:,.0f}%”
},
“legend”: {
“enabled”:true,
“itemStyle”: {
“fontFamily”: “Calibri, sans-serif”,
“fontSize”: “16px”
},
“itemHoverStyle”: {
“color”: “#333333”
},
“symbolWidth”: 20
}
}

2

Hi @rapisarda,
Coloring with highcharts in QuickSight can be quite tricky from my past experience. The only option where I was able to change the coloring for the visual while also affecting the legend is by adjusting the theme color scheme of the analysis:

image
image205×139 4.99 KB

I’d be curious to see what you setup for the if statement(s) that were able to help you override the visual colors, maybe we can find a work around with a similar tactic.

Either way, I agree that an easier capability of adjusting the coloring in highcharts would be a great feature addition so I’ll mark this as a feature request to promote visibility to the support team.

Thank you!

3

Hi and thank you,

I have specific colours with hex numbers that I need to use for my categories. I’ve used if statements like
“case”,
[“==”, [“get”, [“item”], 1], “Persona 1”],
“#a784ff”
to display my colours instead of the QS palette but if statement like this cannot be applied to a legend from what I can see, the legend still displays the default theme colours. Thank you for making it a feature request.

1 Like
4

Hi @rapisarda,
Thanks for sharing! while doing a bit more research, I could not find an easy out of the box way to handle the legend coloring and according to AWS documentation, coloring is still something that has limitations in QuickSight’s version of highcharts.

As I’ve marked this as a feature request already, I’ll go ahead and close this so the support team gains visibility.

Thank you!