Export with a fill (background color) of 'none' results in black background

[cballenar]

Expected behaviour

Last year (as late as October 2023) Highcharts public Export server used to produce exported JPG with white when a value of 'none' was passed in the svg.

Actual behaviour

Sometime since then, it started generating charts with black backgrounds unless a color is specified.

Reproduction steps

The request below used to produce jpegs with white background but now they have a black background:

curl 'https://export.highcharts.com/' \
  -H 'authority: export.highcharts.com' \
  -H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary89LFVt52WjGB2ey4' \
  --output 'sample-title-002.jpeg' \
  --data-raw $'------WebKitFormBoundary89LFVt52WjGB2ey4\r\nContent-Disposition: form-data; name="filename"\r\n\r\nsample-title-002\r\n------WebKitFormBoundary89LFVt52WjGB2ey4\r\nContent-Disposition: form-data; name="type"\r\n\r\nimage/jpeg\r\n------WebKitFormBoundary89LFVt52WjGB2ey4\r\nContent-Disposition: form-data; name="width"\r\n\r\nundefined\r\n------WebKitFormBoundary89LFVt52WjGB2ey4\r\nContent-Disposition: form-data; name="scale"\r\n\r\n2\r\n------WebKitFormBoundary89LFVt52WjGB2ey4\r\nContent-Disposition: form-data; name="svg"\r\n\r\n<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family: Helvetica, Arial, sans-serif; font-size: 1rem;" xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" aria-label="Interactive chart" aria-hidden="false"><desc aria-hidden="true">Created with Highcharts 11.1.0</desc><defs aria-hidden="true"><filter id="highcharts-drop-shadow-9"><feDropShadow dx="1" dy="1" flood-color="#000000" flood-opacity="0.75" stdDeviation="2.5"></feDropShadow></filter><clipPath id="highcharts-jdnbatt-206-"><rect x="0" y="0" width="526" height="209" fill="none"></rect></clipPath><clipPath id="highcharts-jdnbatt-217-"><rect x="0" y="0" width="526" height="209" fill="none"></rect></clipPath></defs><rect fill="none" class="highcharts-background" filter="none" x="0" y="0" width="600" height="400" rx="0" ry="0" aria-hidden="true"></rect><rect fill="none" class="highcharts-plot-background" x="64" y="47" width="526" height="209" filter="none" aria-hidden="true"></rect><g class="highcharts-pane-group" data-z-index="0" aria-hidden="true"></g><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1" aria-hidden="true"><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 116.5 47 L 116.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 168.5 47 L 168.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 221.5 47 L 221.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 273.5 47 L 273.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 326.5 47 L 326.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 379.5 47 L 379.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 431.5 47 L 431.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 484.5 47 L 484.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 536.5 47 L 536.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 589.5 47 L 589.5 256" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="0" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 63.5 47 L 63.5 256" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1" aria-hidden="true"><path fill="none" stroke="#ccc" stroke-width="1" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 64 256.5 L 590 256.5" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="1" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 64 186.5 L 590 186.5" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="1" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 64 117.5 L 590 117.5" opacity="1"></path><path fill="none" stroke="#ccc" stroke-width="1" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 64 46.5 L 590 46.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" stroke="#cccccc" stroke-width="0" x="64" y="47" width="526" height="209" aria-hidden="true"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2" aria-hidden="true"><text x="327" data-z-index="7" text-anchor="middle" transform="translate(0,0)" class="highcharts-axis-title" style="color: rgb(0, 0, 0); font-size: 0.8em; fill: rgb(0, 0, 0);" y="302.6666669845581">Sample X-Axis</text><path fill="none" class="highcharts-axis-line" stroke="#ccc" stroke-width="1" data-z-index="7" d="M 64 256.5 L 590 256.5"></path></g><g class="highcharts-axis highcharts-yaxis" data-z-index="2" aria-hidden="true"><text x="24.76041603088379" data-z-index="7" text-anchor="middle" transform="translate(0,0) rotate(270 24.76041603088379 151.5)" class="highcharts-axis-title" style="color: rgb(0, 0, 0); font-size: 0.8em; fill: rgb(0, 0, 0);" y="151.5">Sample Y-Axis</text><path fill="none" class="highcharts-axis-line" stroke="#ccc" stroke-width="0" data-z-index="7" d="M 64 47 L 64 256"></path></g><g class="highcharts-series-group" data-z-index="3" filter="none" aria-hidden="false"><g class="highcharts-series highcharts-series-0 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(64,47) scale(1 1)" clip-path="url(#highcharts-jdnbatt-217-)" aria-hidden="false" role="region" tabindex="-1" aria-label="Pistachio, bar series 1 of 3 with 10 bars." style="outline: none;"><path fill="#4886c3" d="M 14.5 158.5 L 17.5 158.5 A 3 3 0 0 1 20.5 161.5 L 20.5 209.5 A 0 0 0 0 1 20.5 209.5 L 11.5 209.5 A 0 0 0 0 1 11.5 209.5 L 11.5 161.5 A 3 3 0 0 1 14.5 158.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2010, 3.64. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 66.5 159.5 L 69.5 159.5 A 3 3 0 0 1 72.5 162.5 L 72.5 209.5 A 0 0 0 0 1 72.5 209.5 L 63.5 209.5 A 0 0 0 0 1 63.5 209.5 L 63.5 162.5 A 3 3 0 0 1 66.5 159.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2011, 3.6. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 119.5 156.5 L 122.5 156.5 A 3 3 0 0 1 125.5 159.5 L 125.5 209.5 A 0 0 0 0 1 125.5 209.5 L 116.5 209.5 A 0 0 0 0 1 116.5 209.5 L 116.5 159.5 A 3 3 0 0 1 119.5 156.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2012, 3.79. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 171.5 158.5 L 174.5 158.5 A 3 3 0 0 1 177.5 161.5 L 177.5 209.5 A 0 0 0 0 1 177.5 209.5 L 168.5 209.5 A 0 0 0 0 1 168.5 209.5 L 168.5 161.5 A 3 3 0 0 1 171.5 158.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2013, 3.63. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 224.5 160.5 L 227.5 160.5 A 3 3 0 0 1 230.5 163.5 L 230.5 209.5 A 0 0 0 0 1 230.5 209.5 L 221.5 209.5 A 0 0 0 0 1 221.5 209.5 L 221.5 163.5 A 3 3 0 0 1 224.5 160.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2014, 3.53. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 277.5 151.5 L 280.5 151.5 A 3 3 0 0 1 283.5 154.5 L 283.5 209.5 A 0 0 0 0 1 283.5 209.5 L 274.5 209.5 A 0 0 0 0 1 274.5 209.5 L 274.5 154.5 A 3 3 0 0 1 277.5 151.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2015, 4.17. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 329.5 144.5 L 332.5 144.5 A 3 3 0 0 1 335.5 147.5 L 335.5 209.5 A 0 0 0 0 1 335.5 209.5 L 326.5 209.5 A 0 0 0 0 1 326.5 209.5 L 326.5 147.5 A 3 3 0 0 1 329.5 144.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2016, 4.64. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 382.5 144.5 L 385.5 144.5 A 3 3 0 0 1 388.5 147.5 L 388.5 209.5 A 0 0 0 0 1 388.5 209.5 L 379.5 209.5 A 0 0 0 0 1 379.5 209.5 L 379.5 147.5 A 3 3 0 0 1 382.5 144.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2017, 4.65. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 434.5 148.5 L 437.5 148.5 A 3 3 0 0 1 440.5 151.5 L 440.5 209.5 A 0 0 0 0 1 440.5 209.5 L 431.5 209.5 A 0 0 0 0 1 431.5 209.5 L 431.5 151.5 A 3 3 0 0 1 434.5 148.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2018, 4.4. Pistachio." style="outline: none;"></path><path fill="#4886c3" d="M 487.5 145.5 L 490.5 145.5 A 3 3 0 0 1 493.5 148.5 L 493.5 209.5 A 0 0 0 0 1 493.5 209.5 L 484.5 209.5 A 0 0 0 0 1 484.5 209.5 L 484.5 148.5 A 3 3 0 0 1 487.5 145.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2019, 4.59. Pistachio." style="outline: none;"></path></g><g class="highcharts-markers highcharts-series-0 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(64,47) scale(1 1)" clip-path="none" aria-hidden="true"></g><g class="highcharts-series highcharts-series-1 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(64,47) scale(1 1)" clip-path="url(#highcharts-jdnbatt-217-)" aria-hidden="false" role="region" tabindex="-1" aria-label="Chocochip, bar series 2 of 3 with 10 bars." style="outline: none;"><path fill="#c77349" d="M 24.5 124.5 L 27.5 124.5 A 3 3 0 0 1 30.5 127.5 L 30.5 209.5 A 0 0 0 0 1 30.5 209.5 L 21.5 209.5 A 0 0 0 0 1 21.5 209.5 L 21.5 127.5 A 3 3 0 0 1 24.5 124.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2010, 6.08. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 77.5 123.5 L 80.5 123.5 A 3 3 0 0 1 83.5 126.5 L 83.5 209.5 A 0 0 0 0 1 83.5 209.5 L 74.5 209.5 A 0 0 0 0 1 74.5 209.5 L 74.5 126.5 A 3 3 0 0 1 77.5 123.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2011, 6.2. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 129.5 121.5 L 132.5 121.5 A 3 3 0 0 1 135.5 124.5 L 135.5 209.5 A 0 0 0 0 1 135.5 209.5 L 126.5 209.5 A 0 0 0 0 1 126.5 209.5 L 126.5 124.5 A 3 3 0 0 1 129.5 121.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2012, 6.31. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 182.5 120.5 L 185.5 120.5 A 3 3 0 0 1 188.5 123.5 L 188.5 209.5 A 0 0 0 0 1 188.5 209.5 L 179.5 209.5 A 0 0 0 0 1 179.5 209.5 L 179.5 123.5 A 3 3 0 0 1 182.5 120.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2013, 6.41. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 234.5 120.5 L 237.5 120.5 A 3 3 0 0 1 240.5 123.5 L 240.5 209.5 A 0 0 0 0 1 240.5 209.5 L 231.5 209.5 A 0 0 0 0 1 231.5 209.5 L 231.5 123.5 A 3 3 0 0 1 234.5 120.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2014, 6.37. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 287.5 118.5 L 290.5 118.5 A 3 3 0 0 1 293.5 121.5 L 293.5 209.5 A 0 0 0 0 1 293.5 209.5 L 284.5 209.5 A 0 0 0 0 1 284.5 209.5 L 284.5 121.5 A 3 3 0 0 1 287.5 118.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2015, 6.51. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 340.5 115.5 L 343.5 115.5 A 3 3 0 0 1 346.5 118.5 L 346.5 209.5 A 0 0 0 0 1 346.5 209.5 L 337.5 209.5 A 0 0 0 0 1 337.5 209.5 L 337.5 118.5 A 3 3 0 0 1 340.5 115.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2016, 6.75. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 392.5 112.5 L 395.5 112.5 A 3 3 0 0 1 398.5 115.5 L 398.5 209.5 A 0 0 0 0 1 398.5 209.5 L 389.5 209.5 A 0 0 0 0 1 389.5 209.5 L 389.5 115.5 A 3 3 0 0 1 392.5 112.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2017, 6.93. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 445.5 111.5 L 448.5 111.5 A 3 3 0 0 1 451.5 114.5 L 451.5 209.5 A 0 0 0 0 1 451.5 209.5 L 442.5 209.5 A 0 0 0 0 1 442.5 209.5 L 442.5 114.5 A 3 3 0 0 1 445.5 111.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2018, 7.04. Chocochip." style="outline: none;"></path><path fill="#c77349" d="M 497.5 114.5 L 500.5 114.5 A 3 3 0 0 1 503.5 117.5 L 503.5 209.5 A 0 0 0 0 1 503.5 209.5 L 494.5 209.5 A 0 0 0 0 1 494.5 209.5 L 494.5 117.5 A 3 3 0 0 1 497.5 114.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2019, 6.84. Chocochip." style="outline: none;"></path></g><g class="highcharts-markers highcharts-series-1 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(64,47) scale(1 1)" clip-path="none" aria-hidden="true"></g><g class="highcharts-series highcharts-series-2 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(64,47) scale(1 1)" clip-path="url(#highcharts-jdnbatt-217-)" aria-hidden="false" role="region" tabindex="-1" aria-label="Mint, bar series 3 of 3 with 10 bars." style="outline: none;"><path fill="#87a860" d="M 35.5 68.5 L 38.5 68.5 A 3 3 0 0 1 41.5 71.5 L 41.5 209.5 A 0 0 0 0 1 41.5 209.5 L 32.5 209.5 A 0 0 0 0 1 32.5 209.5 L 32.5 71.5 A 3 3 0 0 1 35.5 68.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2010, 10.1. Mint." style="outline: none;"></path><path fill="#87a860" d="M 87.5 67.5 L 90.5 67.5 A 3 3 0 0 1 93.5 70.5 L 93.5 209.5 A 0 0 0 0 1 93.5 209.5 L 84.5 209.5 A 0 0 0 0 1 84.5 209.5 L 84.5 70.5 A 3 3 0 0 1 87.5 67.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2011, 10.22. Mint." style="outline: none;"></path><path fill="#87a860" d="M 140.5 63.5 L 143.5 63.5 A 3 3 0 0 1 146.5 66.5 L 146.5 209.5 A 0 0 0 0 1 146.5 209.5 L 137.5 209.5 A 0 0 0 0 1 137.5 209.5 L 137.5 66.5 A 3 3 0 0 1 140.5 63.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2012, 10.51. Mint." style="outline: none;"></path><path fill="#87a860" d="M 192.5 64.5 L 195.5 64.5 A 3 3 0 0 1 198.5 67.5 L 198.5 209.5 A 0 0 0 0 1 198.5 209.5 L 189.5 209.5 A 0 0 0 0 1 189.5 209.5 L 189.5 67.5 A 3 3 0 0 1 192.5 64.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2013, 10.43. Mint." style="outline: none;"></path><path fill="#87a860" d="M 245.5 65.5 L 248.5 65.5 A 3 3 0 0 1 251.5 68.5 L 251.5 209.5 A 0 0 0 0 1 251.5 209.5 L 242.5 209.5 A 0 0 0 0 1 242.5 209.5 L 242.5 68.5 A 3 3 0 0 1 245.5 65.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2014, 10.31. Mint." style="outline: none;"></path><path fill="#87a860" d="M 298.5 55.5 L 301.5 55.5 A 3 3 0 0 1 304.5 58.5 L 304.5 209.5 A 0 0 0 0 1 304.5 209.5 L 295.5 209.5 A 0 0 0 0 1 295.5 209.5 L 295.5 58.5 A 3 3 0 0 1 298.5 55.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2015, 11.06. Mint." style="outline: none;"></path><path fill="#87a860" d="M 350.5 45.5 L 353.5 45.5 A 3 3 0 0 1 356.5 48.5 L 356.5 209.5 A 0 0 0 0 1 356.5 209.5 L 347.5 209.5 A 0 0 0 0 1 347.5 209.5 L 347.5 48.5 A 3 3 0 0 1 350.5 45.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2016, 11.78. Mint." style="outline: none;"></path><path fill="#87a860" d="M 403.5 42.5 L 406.5 42.5 A 3 3 0 0 1 409.5 45.5 L 409.5 209.5 A 0 0 0 0 1 409.5 209.5 L 400.5 209.5 A 0 0 0 0 1 400.5 209.5 L 400.5 45.5 A 3 3 0 0 1 403.5 42.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2017, 11.99. Mint." style="outline: none;"></path><path fill="#87a860" d="M 455.5 43.5 L 458.5 43.5 A 3 3 0 0 1 461.5 46.5 L 461.5 209.5 A 0 0 0 0 1 461.5 209.5 L 452.5 209.5 A 0 0 0 0 1 452.5 209.5 L 452.5 46.5 A 3 3 0 0 1 455.5 43.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2018, 11.9. Mint." style="outline: none;"></path><path fill="#87a860" d="M 508.5 44.5 L 511.5 44.5 A 3 3 0 0 1 514.5 47.5 L 514.5 209.5 A 0 0 0 0 1 514.5 209.5 L 505.5 209.5 A 0 0 0 0 1 505.5 209.5 L 505.5 47.5 A 3 3 0 0 1 508.5 44.5 Z" stroke="#ffffff" stroke-width="1" opacity="1" filter="none" class="highcharts-point" tabindex="-1" role="img" aria-label="2019, 11.86. Mint." style="outline: none;"></path></g><g class="highcharts-markers highcharts-series-2 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(64,47) scale(1 1)" clip-path="none" aria-hidden="true"></g></g><text x="300" text-anchor="middle" class="highcharts-title" data-z-index="4" style="font-size: 1.2em; color: rgb(0, 0, 0); font-weight: bold; fill: rgb(0, 0, 0);" y="25" aria-hidden="true">Sample Title 002</text><text x="300" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color: rgb(102, 102, 102); font-size: 0.8em; fill: rgb(102, 102, 102);" y="46" aria-hidden="true"></text><text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color: rgb(102, 102, 102); font-size: 0.8em; fill: rgb(102, 102, 102);" y="397" aria-hidden="true"></text><g class="highcharts-legend highcharts-no-tooltip" data-z-index="7" transform="translate(251,317)" aria-hidden="true"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" stroke="#999999" stroke-width="0" filter="none" x="0" y="0" width="97" height="68"></rect><g data-z-index="1"><g><g class="highcharts-legend-item highcharts-column-series highcharts-color-undefined highcharts-series-0" data-z-index="1" transform="translate(8,3)"><text x="21" text-anchor="start" data-z-index="2" style="color: rgb(71, 71, 71); cursor: pointer; font-size: 0.8em; text-decoration: none; fill: rgb(71, 71, 71);" y="17">Pistachio</text><rect x="2" y="6" rx="6" ry="6" width="12" height="12" fill="#4886c3" class="highcharts-point" data-z-index="3"></rect></g><g class="highcharts-legend-item highcharts-column-series highcharts-color-undefined highcharts-series-1" data-z-index="1" transform="translate(8,22)"><text x="21" y="17" text-anchor="start" data-z-index="2" style="color: rgb(71, 71, 71); cursor: pointer; font-size: 0.8em; text-decoration: none; fill: rgb(71, 71, 71);">Chocochip</text><rect x="2" y="6" rx="6" ry="6" width="12" height="12" fill="#c77349" class="highcharts-point" data-z-index="3"></rect></g><g class="highcharts-legend-item highcharts-column-series highcharts-color-undefined highcharts-series-2" data-z-index="1" transform="translate(8,41)"><text x="21" y="17" text-anchor="start" data-z-index="2" style="color: rgb(71, 71, 71); cursor: pointer; font-size: 0.8em; text-decoration: none; fill: rgb(71, 71, 71);">Mint</text><rect x="2" y="6" rx="6" ry="6" width="12" height="12" fill="#87a860" class="highcharts-point" data-z-index="3"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7" aria-hidden="true"><text x="90.3" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2010</text><text x="142.89999999999998" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2011</text><text x="195.5" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2012</text><text x="248.09999999999997" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2013</text><text x="300.7" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2014</text><text x="353.3" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2015</text><text x="405.9" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2016</text><text x="458.5" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2017</text><text x="511.09999999999997" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2018</text><text x="563.7" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="middle" transform="translate(0,0)" y="283" opacity="1">2019</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7" aria-hidden="true"><text x="49" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="end" transform="translate(0,0)" y="261" opacity="1">0</text><text x="49" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="end" transform="translate(0,0)" y="191" opacity="1">5</text><text x="49" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="end" transform="translate(0,0)" y="121" opacity="1">10</text><text x="49" style="color: rgb(0, 0, 0); cursor: default; font-size: 0.8em; fill: rgb(0, 0, 0);" text-anchor="end" transform="translate(0,0)" y="52" opacity="1">15</text></g></svg>\r\n------WebKitFormBoundary89LFVt52WjGB2ey4--\r\n'

Can anyone confirm if they're also seeing this? Has anything changed recently that could've affected the output. What would be a more appropriate default to ensure JPGs generate a white background chart and PNGs a transparent one?

---

Correction: I originally thought this also affected PNGs but in their case they export the images with a transparent background when "none" is provided.

[jszuminski]

Thanks for reporting!

Here's a related issue: #463
And here's a pull request solving it: #464

The best way to ensure that the PNGs have a transparent background is to include the chart.backgroundColor: 'transparent' option in the chart's config. If you're generating a JPEG, the chart.backgroundColor: 'transparent' is generating a JPEG image with a white background (which is the desired behavior).

Please let me know if that works for you. If not, could you please create a minimal reproducible Highcharts config which would illustrate this problem?

[cballenar]

Thank you for the feedback @jszuminski I attempted using transparent but I still seem to be getting a black background on JPGs. Can you confirm if this is setup as expected?

https://codepen.io/cballenar/pen/VwNPqeN

[jszuminski]

Thanks for reproducing @cballenar!

So you expect the page to be white by default, for all the formats apart from PNG? And for PNGs with chart.backgroundColor: 'transparent' to be transparent?

[cballenar]

Yes, exactly. This was also the expected behavior mentioned in the issue you linked before.

Thanks!

[jszuminski]

I've created a pull request for it: #499 which should be a part of our next release (which is initially planned for the next week).

[cballenar]

@jszuminski thanks again for the update and prompt response. Unfortunately I don't see this having taken effect yet. Do you know when we might see these changes in the Highcharts export server?

[jszuminski]

Yes, you're right. We had to postpone a release because of the other issues. We have it planned for this week.

[jszuminski]

@cballenar I'm sorry, but we've found a few new issues related to performance in the latest versions of Puppeteer and the Export Server. Thus we need to postpone the release again (for, hopefully, next week). Apologies for the inconvenience!

[cballenar]

No prob. Appreciate the heads up!

[cballenar]

Hi @jszuminski just wanted to circle back and check if this had been deployed. The previously built sample continues to return JPEGs with black background.

https://codepen.io/cballenar/pen/VwNPqeN

Thanks!