directive -> directive -> chart :: Does not render

https://plnkr.co/edit/cHSkSfmHI0WW7TS5Krwr?p=preview

The use case: Dynamically add charts based upon a directive setting.

First directive declares type of chart to be created inside the second directive The second directive dynamically compiles a third directive The third directive has controller that has data/config for chart.

No js errors and templates are rendered properly. Chrome Batarang shows the chart's full angular model has been created. But chart does not show.

I had the same issue. I solve this by modifying my directive template. I think the size of the outer html element was too small.

here is my before -> after using bootstrap css:

Before:

<canvas class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>

After:

<div class="row">
    <div class="cold-md-12">
        <canvas class="chart chart-line" chart-data="data"
        chart-labels="labels" chart-series="series" chart-options="options"
        chart-dataset-override="datasetOverride" chart-click="onClick">
        </canvas>
    </div>
</div>

Similar to what @GuiSevero found, the canvas element does not wrap itself in a <div> the way that the 0.x releases did, so code that worked like this in 0.x:

<canvas class="chart chart-line" chart-data="vm.chartData" 
chart-labels="vm.chartLabel" chart-series="vm.chartSeries"></canvas>

Now requires being wrapped in a <div>:

<div>
   <canvas class="chart chart-line" chart-data="vm.chartData" 
    chart-labels="vm.chartLabel" chart-series="vm.chartSeries"></canvas>
</div>

Works for me !! from:

<canvas width="400" height="200" class="chart chart-bar" chart-click="vm.graphicOnClick" chart-data="vm.graphicData" chart-labels="vm.graphicLabels" chart-series="vm.graphicSeries"></canvas>

to

`

`

the directive was included in bootstrap structure: `

`

Wrapping in a div works perfectly! I needed to do this in a Component in Angular 1.5.8 to get it to render. Should this be added to the docs?

This solved my problem! Thanks!

Had the same problem working with ui-router, the charts are in a state and I thought the problem was with rendering the chart before it was fully loaded, but the solution was just adding a "div" tag wrapper for the chart. Thanks for the solution !!!

Found the same issue, basically using nested components, to make a modular dashboard, and the directives were individual panels. Had me scratching my head for most of the day.

This is the most awkward fix I've ever encountered. Thanks for sharing.