Highchart in angularJS directive

Question

I wrap a highchart in a angularJS directive, and I'm trying to add a button that should be display just below the chart. The problem is the button does not exists.

HTML:

<div id="container" my-chart style="height: 400px; margin-top: 1em"></div>

JS:

var app = angular.module('app', []);
app.directive('myChart', function () {
    return {
        restrict: 'A',
        replace: true,

        template: '<div><div id="chart"></div><div><button id="btn">Click</button></div><div>',
        link: function (scope, elem, attrs) {
            elem.highcharts({
                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]
                }]

            });
        }
    }
});

please see this JsFiddle for example.

UPDATE: This is the fixed JsFiddle after implementing the answer.

chriss · Accepted Answer · 2014-11-06 07:51:38Z

1

it is because you are calling .highcharts() on element so it deletes everything inside and renders chart inside. try using template like this:

<div>
    <div id="chart"></div>
    <div><button id="btn">Click</button></div>
</div>

and then in your directive link function call:

$("#chart").highcharts({})

Instead of this id selector You can use what ever kind of selector you want. You can put class and then call it on element child with class chart like:

$(elem).children(".chart").highcharts({...

answered Nov 6, 2014 at 7:51

chriss

6694 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

huan feng · Accepted Answer · 2014-11-06 08:15:41Z

1

I think if you want to add a button in a highcharts way, maybe this fiddle can help you:

fiddle

exporting: {
        buttons: {
            customButton: {
                x: -62,
                onclick: function () {
                    alert('Clicked');
                },
                symbol: 'circle'
            }
        }
    }

answered Nov 6, 2014 at 8:15

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Collectives™ on Stack Overflow

Highchart in angularJS directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related