chart export blurs on zoom

[wildan2711]

I'm trying to export a chart that is zoomed. This is from a screenshot:

When I export to PNG using this function:

this.chart.export.capture({}, function() {
    this.toPNG({
        quality: 1,
        multiplier: 2
    }, function(data) {
        this.download(data, 'image/png', 'chart.png')
    })
})

The PNG blurs like this:

I'm using guides so I had to set the minimum and maximum of the axis explicitly.

Thank you.

[RobbiesCode]

That looks a little too blurry, I agree! Do you have your chart online somewhere, so we can have a closer look? Also, can you provide some details, like browser and OS where this is happening?

[wildan2711]

I managed to create a codepen that reproduces the issue, here it is:

https://codepen.io/wildan2711/pen/REOOjB?editors=1111

Thanks.

[martynasma]

We're trying to get to the bottom of it.

Meanwhile, it looks like it is caused by trend lines. If you remove that section, exports become fine.

[wildan2711]

Yes, although some of our charts does not blur when using trend lines.

[wildan2711]

any news on this?

[martynasma]

Sorry for the wait.

Export plugin was just updated. It should fix the issue.

[martynasma]

Ah sorry, the plugin was not updated. We do have a solution, though.

Please refer to this demo: https://codepen.io/anon/pen/GeOWzg?editors=0010

This section should fix the issue:

  "export": {
    "backgroundColor": "#ffffff",
    "enabled": true,
    "reviver": function(obj) {
      if ( obj.width > this.setup.chart.realWidth ) {
        obj.width = this.setup.chart.realWidth;
      }
    }
  },

[wildan2711]

Nice, it works! Thanks for the workaround.