CODEWITHSUNDEEP
svghighcharts
Markus Breitinger
Markus Breitinger

Reputation: 1

Place Highstock inside a SVG

can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?

Kind regards

Markus Breitinger

Upvotes: 0

Views: 457

Answers (2)

GreenRover
GreenRover

Reputation: 1526

Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.

But you can copy the SVG of highstock in you SVG. But you will lose all attached events. Like drag and drop, click ....

Here an Example of it. http://jsfiddle.net/L6SA4/10/

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create a hidden and not attached div container.
        var div = $('<div>This is an hidden unatached container.</div>');

        // Create the chart
        div.highcharts('StockChart', {

            chart: {
                width: 480,
                height: 400,
                events: {
                    load: function () {
                        // If hidden div was generated, take the svg content and put it into svg.
                        var stockSvg = $('svg', this.container);

                        var svgObj = $('#mySvg').svg();

                        // Force position of highstock
                        stockSvg.attr('x', 20);
                        stockSvg.attr('y', 30);

                        // Replace ugly rect with highstock
                        $('#container', svgObj).replaceWith(stockSvg); 
                    }
                }
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });        

    });

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.

http://api.highcharts.com/highcharts#Chart.getSVG()

Upvotes: 1

Related Questions