Home › Forums › Chart Support › Fullsize chart?

Fullsize chart?

Viewing 5 posts - 1 through 5 (of 5 total)
  • October 17, 2013 at 7:43 pm #5394

    zenox

    Hello,
    I’m attempting to embed a chart within a cocoa application and I would like the chart to resize as the user resizes the application.

    I’m using a WebView component and I have successfully gotten the chart to display using the following sample HTML:

    <!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                var chart = new CanvasJS.Chart("chartContainer",
                                               {
                                               title:{
                                               text: "Coal Reserves of Countries"
                                               },
                                               data: [
                                                      {
                                                      type: "stackedColumn",
                                                      dataPoints: [
                                                                   {  y: 111338 , label: "USA"},
                                                                   {  y: 49088, label: "Russia" },
                                                                   {  y: 62200, label: "China" },
                                                                   {  y: 90085, label: "India" },
                                                                   {  y: 38600, label: "Australia"},
                                                                   {  y: 48750, label: "SA"}
                                                                   
                                                                   ]
                                                      },  {
                                                      type: "stackedColumn",
                                                      dataPoints: [
                                                                   {  y: 135305 , label: "USA"},
                                                                   {  y: 107922, label: "Russia" },
                                                                   {  y: 52300, label: "China" },
                                                                   {  y: 3360, label: "India" },
                                                                   {  y: 39900, label: "Australia"},
                                                                   {  y: 0, label: "SA"}
                                                                   
                                                                   ]
                                                      }
                                                      ]
                                               });
                                               
                                               chart.render();
            }
        </script>
        <script type="text/javascript" src="./canvasjs.min.js"></script></head>
    <body>
        <div id="chartContainer" style="height: 100%; width: 100%;">
        </div>
    </body>
</html>

    The chart expands properly width, but does not expand via height. See the two screenshots hereBefore Expanded and here Expanded image.

    Any suggestions on how I could possible get the charts height to expand automatically?

    October 22, 2013 at 6:34 pm #5420

    zenox

    Any suggestions to try? Is there anyway I can make my canvas fullscreen?

    October 23, 2013 at 11:38 am #5424

    Sunil Urs

    Hi,

    Yes, it is possible. CanvasJS Charts just take the height and width of its container. So you need to make sure the container’s height is 100%. You can do the same by setting height of both body and html to 100%.

    html,body{
    height:100%;
}

    Here is a JSFiddle that I created.

    Setting 100% width and height for chart

    Here is one related Stackoverflow thread.

    Hope this helps.

    —
    Sunil Urs

    October 23, 2013 at 4:13 pm #5426

    zenox

    Awesome, thanks for the details! I’ll give this a shot!

    October 23, 2013 at 4:47 pm #5427

    zenox

    FYI that worked like a charm. Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.