Home forums Using CanvasJS Fullsize chart?

This topic contains 4 replies, has 2 voices, and was last updated by  zenox 3 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #5394

    zenox
    Participant

    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 hereExpanded image.

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

    #5420

    zenox
    Participant

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

    #5424

    Sunil Urs
    Keymaster

    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.

    Here is one related Stackoverflow thread.

    Hope this helps.


    Sunil Urs

    #5426

    zenox
    Participant

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

    #5427

    zenox
    Participant

    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.