CODEWITHSUNDEEP
angularjshtmlchart.js
HelloWorld
HelloWorld

Reputation: 382

ChartJS with AngularJS

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

Upvotes: 1

Views: 672

Answers (1)

Vicky
Vicky

Reputation: 2068

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>

Upvotes: 2

Related Questions