Highcharts (highcharts-ng) with ng-repeat worked, But need to pass the data for each chart from the attributes

Question

I like to pass the date from the view template / may be from the controller, so that the highchart should map the data given by the <highchart /> directive.

Explaination :

<ul>
      <li ng-repeat="li in list">
                <highchart id="chart1" 
                           config="chart"  
                           chartTitle="{{li.name}}"  
                           kpiValue="{{li.data}}">
                 </highchart>
            </li>
        </ul>

And in my controller, I have the code like

myapp.controller('myctrl', function ($scope) {
    $scope.list = [
     {data:10,name:'first KPI',type:"bar"}, /*Make a bar chart of title 'first KPI', with a bar length to 10 */ 
     {data:12,name:'sec KPI',type:"bar"}, /*Make a bar chart of title 'sec KPI',with a bar length to 12 */ 
     {data:32,name:'third KPI',type:"bar"} /*Make a bar chart of title 'third KPI',with a bar length to 32 */ 
    ];
....
....

$scope.chart = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10] //to make accepts the values dynamically from <highcharts />, Need help
        }],
        title: {
            text: 'Hello' //to make accepts the values dynamically from <highcharts />, Need help
        },
        loading: false
    }
});

What I am excepting here is I want 3 bar charts like the

• first highchart bar expanded to 10
• second highchart bar expanded to 12
• Third highchart bar expanded to 32

If you see the plunker you will get more idea about what I am talking about.

plunker demo

Used https://github.com/pablojim/highcharts-ng for <highcharts />

Answer 1

Try https://github.com/pablojim/highcharts-ng

You need to create directive that wrap highchart element. You're having scope issue with angular and highcharts.