Reputation: 49

how to get svg of highcharts using div id?

<script>
   $(function () {


        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'funnel',
                marginRight: 100
            },
            title: {
                text: 'Sales funnel'
            },
            plotArea: {
                shadow: null,
                borderWidth: null,
                backgroundColor: null
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b> ({point.y:,.0f})',
                        color: 'black',
                        softConnector: true
                    },
                    neckWidth: '30%',
                    neckHeight: '25%'

                    //-- Other available options
                    // height: pixels or percent
                    // width: pixels or percent
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Unique users',
                data: [
                    ['Website visits',   15654],
                    ['Downloads',       4064],
                    ['Requested price list', 1987],
                    ['Invoice sent',    976],
                    ['Finalized',    846]
                ]
            }]
        });

        // Add the jQuery UI resizin
        var container = $('#container')[0];
        $('#resizer').resizable({
            // On resize, set the chart size to that of the 
            // resizer minus padding. If your chart has a lot of data or other
            // content, the redrawing might be slow. In that case, we recommend 
            // that you use the 'stop' event instead of 'resize'.
            resize: function() {
                chart.setSize(
                    this.offsetWidth - 20, 
                    this.offsetHeight - 20,
                    false
                );
            }
        });
    });
    </script>

I did a sample funnel chart using highcharts so i dont wanna use highcharts export feature. I need to get the svg of the below chart using the div id.
Below code is for the div part of the chart it will render the chart in this div.

    <div id="container" style="height: 400px;">
    </div>



    using div id "container" i need to get svg of the chart.

Upvotes: 4

Answers (4)

rumman0786

Reputation: 1310

In addition to Ricardo Alvaro Lohmann's Answer, I must point out that although Highcharts getSVG() does return a svg of the existing chart, It does not return the exact same svg that is generated in the browser, It changes the scaling values in almost all height, width, x, y's values and sometimes it also skips some of the points in y-axis as well. Please check the snippet to find mismatch.

If you compare the difference in svg by inspecting the html vs svg in the console(from getSVG()) after clicking the button. You will also see the mismatch if you download svg from the button on top right, notice the y axis value in the downloaded image vs the one in browser.

In order to get the exact same SVG which is generated by highchart XMLSerializer can be used.

var svgDoms = document.getElementsByClassName('highcharts-root');
var serializer = new XMLSerializer();
var serializedSvgString = serializer.serializeToString(svgDoms[0]);

This will work for the snippet I provided.

Upvotes: 0