Removing chart background on print

All charts#events#export#print

Your on-screen designs might call for a chart background. However, when printed, those will wasted a lot of ink. This tutorial will explain how to disable chart’s background when using Export’s Print option.

The problem

Let’s use a chart with a nice gradient as a background.

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Disabling chart background on printdisabling-chart-background-on-print

Now, when we try to print it, the background carries over:

The solution

To solve the issue, we need to briefly disable background when printing operation starts and bring it back when it finishes.

For that we are going to be using Export’s exportstarted and exportfinished events.

Additionally, we will have to check if it’s a print operation, so that saving to images is not affected.

TypeScript

chart.exporting.events.on("exportstarted", function(ev) {   if (ev.format == "print") {     chart.background.visible = false;   } }); chart.exporting.events.on("exportfinished", function(ev) {   if (ev.format == "print") {     chart.background.visible = true;   } });

JavaScript

chart.exporting.events.on("exportstarted", function(ev) {   if (ev.format == "print") {     chart.background.visible = false;   } }); chart.exporting.events.on("exportfinished", function(ev) {   if (ev.format == "print") {     chart.background.visible = true;   } });

JSON

{  // ...  "exporting": {    // ...    "events": {      "exportstarted":  function(ev) {        if (ev.format == "print") {          chart.background.visible = false;        }      },      "exportfinished":  function(ev) {        if (ev.format == "print") {          chart.background.visible = true;        }      }     }  }}

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Disabling chart background on printdisabling-chart-background-on-print-2