CODEWITHSUNDEEP
javascriptchartshighcharts
user2315852
user2315852

Reputation: 31

How to export charts in multiple sizes with Highcharts?

I'm trying to create a Highchart chart that can be downloaded as a PNG in multiple resolutions.

I've created this JSFiddle file as a test: http://jsfiddle.net/4v133hnm/26/

Here's the relevant code, I think:

export_for_print = function() {
  var chart = $('#container').highcharts();
  chart.exportChartLocal(null, {
    chart: {
      sourceWidth: 4000,
      sourceHeight: 2000,
      scale: 6
    }
  });
};

The export works fine, but it only comes through in a single resolution.

If you take a look at the custom "Export for email/desktop/print" functions, I've tried changing the sourceWidth, sourceHeight, and scale attributes, but no matter what I do, the PNG downloaded from the chart is 1200x800.

I'd really appreciate any help with this issue — thanks!

Upvotes: 1

Views: 1137

Answers (2)

morganfree
morganfree

Reputation: 12472

The first argument is for exporting options so you should change your code to this:

export_for_print = function() {
  var chart = $('#container').highcharts();
  chart.exportChartLocal({
     sourceWidth: 4000,
     sourceHeight: 2000,
     scale: 6
  }, null);
};

http://api.highcharts.com/highcharts#Chart.exportChart

Upvotes: 3

gm-br
gm-br

Reputation: 30

take a look on the documentation:

You need change the scale, the scale will change your resolution.

Here you can see one example with two different resolutions, 600x400 and 1200x800:

http://api.highcharts.com/highcharts#exporting.scale

$(function () {
    $('#container').highcharts({

        title: {
            text: 'Highcharts exporting scale demo'
        },

        subtitle: {
            text: 'This subtitle is HTML',
            useHTML: true
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],

        exporting: {
            allowHTML: true,
            enabled: false
        }

    });

    $('button.export').click(function () {
        $('#container').highcharts()
            .exportChart({
                scale: $(this).data().scale//take a look here
            });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div style="width: 600px; margin: 0 auto">
    <div id="container" style="height: 400px"></div>

    <button class="export" data-scale="1">Scale = 1</button>
    <button class="export" data-scale="2">Scale = 2</button>
</div>

Upvotes: 0

Related Questions