ChartJS with AngularJS

Question

How do I show canvas element inside custom angular directives?

I am very new to angularjs. Please get me any demo/idea about chartjs with angularjs.

Note: I want custom directive to show charts

This is what i tried in js->

var demo = angular.module('newchart');

demo.directive('chartdiv', function() {
    return {
        restrict: 'E',
        template: '<canvas id="chartNew" class="chart chart-line col-md-12 col-sm-12" chart-data="chartData" chart-labels="chartLbl" chart-series="chartseries" width="700" height="280" chart-colors="colr_nofill" chart-options="chartopt"></canvas>'
    };
});

Try this link jtblin.github.io/angular-chart.js codeproject.com/Tips/1156283/… — Danish
– Danish, Commented Nov 30, 2017 at 9:37

Vicky · Accepted Answer · 2020-10-27 07:14:56Z

2

In directive you can't access the scope variable of particular controllers.To know about scope access directive try this https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

You can also try the below code

demo.directive('chartdiv', function() {

return {
transclude: true,
restrict: 'E',
 scope: {
            chartLbl: "@",
            chartseries:"@",
            chartopt:"@",
            chartData:"@",
            colr_nofill:"@",
            
    },
template: '<canvas id="chartNew" 
chart-data="chartData" chart-labels="chartLbl" chart-series="chartseries" 
width="700" height="280" chart-colors="colr_nofill" chart-
options="chartopt">
</canvas>'

    link: function(scope){
    /*You can add css class here */
    chartNew.addClass("chart");
    }
};
});

In HTML you can pass the angularjs scope data in a variable on custom directive tag and get it in directive and use it in the template.

<chart chartData="{{chart_chartData}}" 
chartLbl="{{chart_chartLbl}}" chartopt="{{chart_chartopt}}" 
colr_nofill="{{chart_colr_nofill}}" 
chartseries="{{chart_chartseries}}"> 
</chart>

edited Oct 27, 2020 at 7:14

answered Dec 6, 2017 at 14:23

Vicky

2,0782 gold badges13 silver badges20 bronze badges

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

1 Comment

HelloWorld Over a year ago

1+ for the link that you shared...!

Collectives™ on Stack Overflow

ChartJS with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related