Canvas height problem with angular material

[nimeetshah0]

Modules in use:

1. Angular Material 0.10.0
2. chart.js 1.0.2
3. angular-chart.js 0.7.2

   Requirement:

Trying to create a responsive chart for all screen sizes using angular material.

Problem:

The height of the .chart-container div and the canvas is not taking it's parent div height. I want the chart to use up the entire height that is available to it in the page.

I cannot use absolute values for height because I want the chart to fit nicely on all screen sizes. Therefore, I'm using percentages.

Angular Material html markup:

<div layout="column" layout-fill style="position:absolute">
    <div layout="column" layout-margin layout-align="end" flex>
        <canvas id="bar" class="chart chart-bar" data="chart.data" series="chart.series" labels="chart.labels" options="chart.options" legend="true" height="100%"></canvas>
    </div>
</div>

Chart options:

$scope.chart.options = {
        responsive: true,
        maintainAspectRatio: true,
        barDatasetSpacing: 1,
        barShowStroke: true,
        barStrokeWidth : 2,
        barValueSpacing : 5
    };

Notes:

1.maintainAspectRatio has to be set to true because I'm facing the issue of chart-resize every time the data is changed. There are issues for this logged on the ChartJS git but none of the solutions have worked for me so far.

2. responsive: true because I want the chart to be responsive.
3. No CSS overrides have been applied to the div or the canvas.

   Screenshot of the parent div element

Screenshot of the .chart-container div

Screenshot of the canvas

Screenshot on larger screen (which is OK, kinda)

TL;DR

The chart should fill the height of the parent div.

[mzbyszynski]

I have some bar charts inside an md-grid-list (md-grid-tile really). I was able to get the height to fill the tile by adding height="100%" width="100%" to the canvas (you already have the height set, so that may be enough, and I also added this to our css file:

md-grid-tile .chart-container {
    width: 90%;
    height: 90%;
}

not quite the same layout as yours, but you may want to try styling that chart-container class.

If you put together a plunkr or something that shows the issue, I'd be happy to take a look as well.

Hope that helps!

[muldon]

mzbyszynski this solution solved my problem. Thanks !

[nimeetshah0]

Thanks for the idea mzbyszynski. I ended up using the flexbox css and have the following styles for the .chart-container

.chart-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width:80%;
}

But now I see that the canvas is stretched to fill the .chart-container.

If I remove the flex-grow, the canvas returns to it's original size but then the .chart-container does not use the entire height available to it.

[muldon]

I tried everything, there is really a bug concerning sizes of the charts. Charts don't respect sizes, no matter what. I thought I had solved with the @mzbyszynski solution but not... still waiting for a solution...

[jtblin]

Could you post a repro using the jsbin template? I don't use "angular material" myself.

[muldon]

sorry I don't use jsbin template. Only angularjs + jquery.

On Sat, Aug 22, 2015 at 6:56 AM, Jerome Touffe-Blin < notifications@github.com> wrote:

Could you post a repro using the jsbin template http://jsbin.com/dufibi/3/edit?html,js,output? I don't use "angular material" myself.

— Reply to this email directly or view it on GitHub https://github.com/jtblin/angular-chart.js/issues/169#issuecomment-133673922 .

[jtblin]

Well sorry but I can't debug issues without a repro case... Maybe you didn't understand what a repro case with jsbin is?

[muldon]

exactly, I really didn't understand what it is. My apologies.

On Wed, Aug 26, 2015 at 7:15 AM, Jerome Touffe-Blin < notifications@github.com> wrote:

Well sorry but I can't debug issues without a repro case... Maybe you didn't understand what a repro case with jsbin is?

— Reply to this email directly or view it on GitHub https://github.com/jtblin/angular-chart.js/issues/169#issuecomment-134934476 .

[Quixomatic]

Did you try the layout-fill attribute that comes with angular material? it will add the layout-fill class to any element it is set on and take up the full space available to it.

[muldon]

No James, I ended up changing the libraries versions and my problem was solved. Thanks anyway...

On Tue, Oct 6, 2015 at 4:10 PM, James Freund notifications@github.com wrote:

Did you try the layout-fill attribute that comes with angular material? it will add the layout-fill class to any element it is set on and take up the full space available to it.

— Reply to this email directly or view it on GitHub https://github.com/jtblin/angular-chart.js/issues/169#issuecomment-145968596 .

[nmarshall23]

I have a similar problem. The chart does not fill the parent element. Here is a jsbin. In my example the parent div, with the class chartBox, has a black border around it. That white space around chart shouldn't be there.