Series color turns black on export to jpeg & pdf

[jcmf16]

Hi just want to ask if anyone has any idea why my column chart is not displaying the correct colors when exporting to jpeg

I'm setting the color of each data of the series depending on one variable the punch type. I've been using rgba for the color

Code: Select all

series:{
   data: [{
        y: hours,
        x: categories.indexOf(dayJs(item.applicableDate).format(ABBR_MONTHDATE_DAY)),
        color: `rgba(${PUNCH_TYPE_COLOR_MAP[item.punchType]}, 0.32`,
        selected: index === 0,
      }],
      allowPointSelect: true,
      states: {
        select: {
          color: `rgba(${PUNCH_TYPE_COLOR_MAP[item.punchType]}, 1`,
        },
      },
      custom: {
        isOpen: item.isOpen,
        date: item.applicableDate,
      },
}

on screen it looks like this

screen.png (106.99 KiB) Viewed 1265 times

but on export it looks like this

export.png (36.44 KiB) Viewed 1265 times

[dominik.c]

Hello jcmf16!

Welcome to our forum and thanks for contacting us with your question!

You set the color right, so I'm not sure what is the issue here. You can check your code on our export server, over here: https://export.highcharts.com/

Could you try setting the color like: color: rgba(255,255,255) ?

Best regards!

[jcmf16]

Thanks for that. It looks like the rgba doesnt work for export?
i tried using the actual color code, it works

Code: Select all

 "series": [
        {
            "data": [{
               "x": 1,
   			   "y": 9,
               "name": "Point2",
               "color": "#00FF00"
            }],
            "type": "column"
        },
        {
            "data": [5,3,4,2],
            "type":"column"
          
        }
    ]

but when i replace the color with "rgba(80,187,80)".. its showing as black on the export just like mine

looks like a bug?

[dominik.c]

Hi again!

I've checked it and it works fine.

Demo: https://jsfiddle.net/BlackLabel/d7ancb1m/

Could you reproduce your issue in an online editor?

Best regards!

[jcmf16]

I think i found the issue. I'm getting my rgba color dynamically and adding a transparency. Then i saw I missed the closing parenthesis!

wrong:

Code: Select all

`rgba(${PUNCH_TYPE_COLOR_MAP[item.punchType]}, 0.38`,

correct:

Code: Select all

`rgba(${PUNCH_TYPE_COLOR_MAP[item.punchType]}, 0.38)`,

thank you so much for your help!

[dominik.c]

Hi again!

Congrats on finding the mistake!

In case of any further questions, feel free to contact us again.
Regards.