Removing chart background on 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.

See the Pen amCharts 4: Disabling chart background on print by amCharts team (@amcharts) on CodePen.0

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.

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;
   }
 });

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;
   }
 });

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

See the Pen amCharts 4: Disabling chart background on print by amCharts team (@amcharts) on CodePen.0