CODEWITHSUNDEEP
javascriptangularjshighchartsangularjs-directive
ronen
ronen

Reputation: 1490

Highchart in angularJS directive

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.

Upvotes: 2

Views: 913

Answers (2)

huan feng
huan feng

Reputation: 8623

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'
            }
        }
    }

Upvotes: 1

chriss
chriss

Reputation: 669

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({...

Upvotes: 1

Related Questions