2

I'm a beginner to CSS and I'm trying to create a page with some tables and charts (using chart.js). My goal is to have a div filling 100% of the width of the page and inside of it two divs:

  1. A div with a table near a chart - 66% of the screen

    1a. Table will be 75% of div

    1b. Chart will take the rest 25% of the div

  2. A div with a chart - 33 %

or to make it more visual: something like this: enter image description here

The purple is the main div, the blues are the two divs (66% and 33%) inside the main div and the reds (light and dark reds) are the div table and the div contain the 25% chart. The yellows are the canvas for the charts.

In order to get that I wrote something like this (I'm ignoring other style attributes shown in the image [like padding, margin, etc.] for simplicity) :

<div id="mainPurple" style="width: 100%;">
    <div id="leftBlue" style="width: 66%;">
        <div id="table" style="width: 75%;">
            <table>...</table>
        </div>
        <div id="donutContainer" style="width: 25%; height: 100%;">
            <canvas id="donutChart"></canvas>
        </div>
    </div>
    <div id="rightBlue" style="width: 33%; height: 100%">
        <canvas id="pie"></canvas>
    </div>
</div>

Like I expected, the purple main div size was determined by the left blue div size that was determined by the table div. What did not happen like I expected is the divs containing the charts, did not stretch to the full height their parent div but instead got this weird ratio:

enter image description here

The only way I could change the size of the chart divs (like in the first picture) was by setting fixed size to the canvas: <canvas id="pie" height="300"> (Which is not good enough because I want it to be aligned for every screen. Trying to set the canvas style attribute did not change the canvas at all.

I assume I'm missing something very basic here but even after reading these answers:

make canvas as wide and as high as parent

HTML5 canvas resize to parent

I still wasn't able to fix it.

Community
  • 1
  • 1
DMEM
  • 1,573
  • 8
  • 25
  • 43
  • 3
    Yeah ... chartJS has an annoying habit of resizing the canvas as it desires. Try setting `maintainAspectRatio: false`. – markE Mar 21 '16 at 04:22
  • That did make a change but did not solve the problem yet. now it looks like this: http://4.1m.yt/ex7Ns5B.png – DMEM Mar 21 '16 at 13:09
  • I also tried to set the canvas height to match the table height using JQuery: `var PieCanvas = document.getElementById("pieCanvas"); canvas.height = $("#tableDiv").height();` but it worked only without the chart: http://4.1m.yt/rEqkBVA.jpg – DMEM Mar 21 '16 at 14:09
  • 1
    Have you set `responsive:true`? – markE Mar 21 '16 at 17:27
  • Yes I have. with `responsive:false` I get: http://2.1m.yt/DtbiCAx.png – DMEM Mar 21 '16 at 17:43
  • @MarkE Is there anything else you think can be done here? – DMEM Mar 22 '16 at 21:02
  • Short of altering the ChartJS source code there's not much to be done. The auto-sizing of charts is heavily baked into ChartJS. :-// I'm not a ChartJS guru (very occasional user), so maybe someone more familiar with ChartJS "tricks" will come along with an answer. – markE Mar 22 '16 at 21:23
  • Yeah, that's what I thought, thanks for trying... I'm considering using Chart.js v2.0 which is currently under development. Does anyone had any experience with it? – DMEM Mar 23 '16 at 01:18
  • Nice, having exactly the same problem and there appears to be no solution. :( – kiradotee Apr 21 '16 at 09:24
  • @kiradotee Yeah... I still wasn't able to solve it in the correct way (I just hard coded the height in pixels for now) but I believe this issue is fixed in Chart.js 2.0 so I would suggest you try it. – DMEM Apr 21 '16 at 14:19
  • @DMEM tried Chart.js 2.0 as I saw you suggested it before but unfortunately discovered it is not backward compatible. :/ Therefore would have to change quite a lot of code. Oh well. :) – kiradotee Apr 21 '16 at 15:12
  • @kiradotee Yep... Same problem for me... – DMEM Apr 21 '16 at 16:41
  • You could try using a
    with padding-bottom:100% and position:relative so the height will match the width. Then place another
    inside this, position:absolute and top, left, right and bottom all set to 0 so it hugs the outer
    . Finally place your canvas inside this inner
    .
     – Chris Smith Nov 10 '16 at 15:09

0 Answers0