score:5

Accepted answer

It sound like you are working on some kind of admin tool so changing the size of the chart might not be an issue. You should probably use chart.setSize(width,height) before calling getSVG().

If you can't go that route, you could also edit the SVG text directly but that wouldn't be a best practice in my opinion.

It seems that the way canvg works is it takes the scaleWidth/scaleHeight and adds a transform="scale()" to the svg based on the options you pass and the existing height/width of the svg. The problem is it doesn't change the existing height/width of the svg and resulting image. I put together a jsfiddle that does what I think you want, but it is probably not the best solution. http://jsfiddle.net/sgearhart2/EsPud/1/

var chart_svg = chart.getSVG();                    
chart_svg = chart_svg.replace('width="600"', 'width="1280"');   
chart_svg = chart_svg.replace('height="400"', 'height="860"'); 

// If i had to guess, canvg does the next part but not the prior part  
var dWidth = 1280/600, dHeight = 860/400;
chart_svg = chart_svg.replace(
    '<svg ', 
    '<svg transform="scale(' + dWidth + ' ' + dHeight + ')" '
);

score:2

As on today (year 2016) I can make canvas use correct sizes of chart by passing parameters into getSVG() function.

As example : 

var chartSVG = chart.highcharts().getSVG({
        exporting: {
            sourceHeight: chart.highcharts().chartHeight,
            sourceWidth: chart.highcharts().chartWidth,
        }
    });

score:7

I improved Scott Gearhart without hacks :) http://jsfiddle.net/marcalj/EsPud/7/

Most important part:

// Get chart aspect ratio
var c_ar = chart.chartHeight / chart.chartWidth;

// Set canvas size
chart_canvas.width = 1280;
chart_canvas.height = chart_canvas.width * c_ar;

canvg(chart_canvas, chart_svg, {
    ignoreDimensions: true,
    scaleWidth: chart_canvas.width,
    scaleHeight: chart_canvas.height
});

Make sure you set fixed width and height on chart element.


Related Query

More Query from same tag