Chart in Canvas sized to 100%

TeeChart JavaScript / HTML5
1

I’m not having any luck drawing a chart in a Canvas sized to 100% width and height. It looks magnified several times and only shows the upper left of the chart (though the title looks centered). I’ve attached a screen shot of a Chrome session with the developer tools open. (The chart lines are only visible because I had scrolled them into view.) The code to create the chart is:

   chart.panel.format.fill = "#F0F0F0";
   chart.title.text = "Baseline";
   chart.addSeries(new Tee.Line([5, 3, 2, 7, 1]));
   chart.addSeries(new Tee.Line([4, 4, 8, 2, 9])).visible = true;
   chart.series.items[0].format.stroke.size = 3;
   chart.axes.left.format.stroke.fill = "red";

I’ve also tried sizing the chart to the canvas:

  chart.bounds.width = chart.canvas.clientWidth;
  chart.bounds.height = chart.canvas.clientHeight;
  chart.draw();

Makes no difference.

Thanks.

Chart100Pct.jpg
Chart100Pct.jpg1648×890 120 KB

2

Hello,

How are you creating the chart?
This seems to work fine for me here:

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>

<!--[if lt IE 9]>
    <script src="../src/excanvas/excanvas_text.js"></script>
    <script src="../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="../src/teechart.js" type="text/javascript"></script>

<script type="text/javascript">

var three, Chart1;

function draw() {
  Chart1=new Tee.Chart("canvas1");
    
  Chart1.panel.format.fill = "#F0F0F0";
  Chart1.title.text = "Baseline";
  Chart1.addSeries(new Tee.Line([5, 3, 2, 7, 1]));
  Chart1.addSeries(new Tee.Line([4, 4, 8, 2, 9])).visible = true;
  Chart1.series.items[0].format.stroke.size = 3;
  Chart1.axes.left.format.stroke.fill = "red";
  Chart1.bounds.width = Chart1.canvas.clientWidth;
  Chart1.bounds.height = Chart1.canvas.clientHeight;
  
  Chart1.draw();
}
  
</script>
</head>
<body onload="draw()">
<br><canvas id="canvas1" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
<br>
</body>
</html>

However, adding this inside gives me cut chart, that could be what you are observing:

<style type="text/css">
#canvas1, html
{
    width: 80%;
    height: 100%;
}
</style>

Is this what you are doing?

3

This seems to work fine for me here:

Yes, that works: you’re using a fixed-size canvas. I am doing something like “<canvas id=“canvas1” style=“width: 100%;” height=“400”>”. Is it not possible?

Thanks,
Jim

4

Hi jim,

As far as I know not. Take a look at this to see some ways to make the canvas fit its parent width/height.

5

I don’t see a problem with sizing the canvas. If you use:

<canvas id="Canvas1" style="height: 100%; width: 100%;">

and inspect the elements, the canvas is correctly sized. It’s just that the chart doesn’t draw correctly.

FWIW, I have found a workaround. I am starting with the HTML generated by TeeSaveToJavascriptFile (Delphi XE, TeeChart Pro v2012.07.121105) and making the following changes:

  • Insert the missing element, with style=“height: 100%; margin: 0;”.
  • Update the to v2014.04.28.1.6.
  • Change “Chart1.draw()” to “resize()”.
  • Insert a resize() function (below).
  • Change body tab to .
  • Remove width & height attributes from the canvas tag.


function resize() {
  var body = document.body;
  var canvas = Chart1.canvas;
  canvas.width = body.clientWidth;
  canvas.height = body.clientHeight - 4;  // prevents vertical scroll bar on <iframe> - haven't figured out where it comes from yet
  Chart1.bounds.width = canvas.width;
  Chart1.bounds.height = canvas.height;
  Chart1.draw();
}
6

Hello,

I’ve just realised we actually have a demo doing this since the first version at “Other/Panel/Full page align” in the features demo.
Direct link to the example.