{"id":17619,"date":"2024-10-17T10:32:41","date_gmt":"2024-10-17T10:32:41","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17619"},"modified":"2024-10-17T10:32:41","modified_gmt":"2024-10-17T10:32:41","slug":"height-width-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/10\/17\/height-width-chart-js\/","title":{"rendered":"3 Ways to Set Height and Width of JavaScript Charts \u2014 JS Chart Tips"},"content":{"rendered":"

\"JavaScript<\/a>Navigating chart dimensions is key in crafting user-friendly visual presentations, especially when integrating multiple charts into an existing web page or app screen. In our JavaScript chart tutorials<\/a>, charts are usually showcased as stretching across an entire web page. But it’s far from rocket science to make them smaller. In today\u2019s JS Chart Tips<\/a>, we explore three effective ways to resize your charts by adjusting their width and height.<\/p>\n

<\/p>\n

Question: How to Set Chart Height and Width?<\/h2>\n

Our\u00a0Support Team<\/a>\u00a0often\u00a0gets inquiries about configuring custom chart sizes in various situations. The most recent question received via live chat was quite general: \u201cHow do I change the height of the chart?\u201d<\/em> No additional details or images were provided, so we addressed it as a general case, assuming it might look\u00a0as shown below, and offered several possible solutions with relevant examples\u00a0right away.<\/p>\n

\"A<\/p>\n

Following our\u00a0response, we decided\u00a0to highlight the approaches we covered, which boil down to three main options, depending on particular needs:<\/p>\n

    \n
  1. Utilizing the JavaScript API<\/li>\n
  2. Configuring through JSON<\/li>\n
  3. Applying CSS styles<\/li>\n<\/ol>\n

    Each approach provides the necessary control and flexibility to ensure your charts fit perfectly within their designated spaces. Join us as we break down these techniques to help you optimize your charting setups.<\/p>\n

    Solution\u00a01: Configuring\u00a0Height\/Width in JavaScript API<\/h2>\n

    Overview<\/h3>\n

    You can\u00a0specify the required height or width\u00a0of your JavaScript chart using the height()<\/code> and width()<\/code> methods\u00a0right inside the chart’s JS code.<\/p>\n

    In Detail<\/h3>\n

    For instance, add the following line of code\u00a0to set the\u00a0height of your JS chart\u00a0as 50% with the help of the corresponding methods from the JavaScript API:<\/p>\n

    chart.height(\"50%\");\r\n<\/code><\/pre>\n
    To configure the width, act exactly the same way with the appropriate method:<\/p>\n
    chart.width(\"50%\");\r\n<\/code><\/pre>\n
    For more information, see these methods in our API reference:<\/p>\n
      \n
    • Height | AnyChart JS API Reference<\/a><\/li>\n
    • Width | AnyChart JS API Reference<\/a><\/li>\n<\/ul>\n
      Example<\/h3>\n
      Check out\u00a0an example of a chart where the height and width settings are specified using the JavaScript API:<\/p>\n
        \n
      • JS\u00a0Column Chart with Height and Width Set in JS API<\/a><\/li>\n<\/ul>\n
        \"JS<\/a><\/p>\n
        Solution 2:\u00a0Configuring Height\/Width in JSON<\/h2>\n
        Overview<\/h3>\n
        If your chart’s configuration is in JSON<\/a> format,\u00a0you\u00a0likely already know that the name of every object in JSON\u00a0corresponds to the name of a method or parameter in JavaScript. Height and width settings are no exception.<\/p>\n
        In Detail<\/h3>\n
        Here’s how you can add the height setting to your JSON configuration:<\/p>\n
        \"height\": \"50%\",\r\n<\/code><\/pre>\n
        Feel free to set the chart width identically:<\/p>\n
        \"width\": \"50%\",<\/code><\/pre>\n
        The entire JSON chart configuration with both settings described above can look\u00a0as follows:<\/p>\n
        \/\/ configure json data\r\nvar json = {\r\n  \/\/ configure the chart\r\n  \"chart\": {\r\n    \/\/ set the column chart type\r\n    \"type\": \"column\",\r\n    \/\/ set the chart height\r\n    \"height\": \"50%\",\r\n    \"width\": \"50%\",\r\n    \/\/ set the chart data\r\n    \"series\": [{\r\n      \"data\": [\r\n        {x: \"Q1\", value: 8},\r\n        {x: \"Q2\", value: 12},\r\n        {x: \"Q3\", value: 18},\r\n        {x: \"Q4\", value: 11}\r\n      ],\r\n    }],\r\n    \/\/ set the chart container\r\n    \"container\": \"container\"\r\n  }\r\n};<\/code><\/pre>\n
        Example<\/h3>\n
        Check out an example of a chart where the height and width settings are defined in\u00a0JSON configuration:<\/p>\n
          \n
        • JS\u00a0Column Chart with Height and Width Set in JSON<\/a><\/li>\n<\/ul>\n
          \"JS<\/a><\/p>\n
          Solution 3: Configuring Height\/Width in CSS Rules<\/h2>\n
          Overview<\/h3>\n
          Alternatively, you can specify\u00a0the required width or height by adjusting the CSS rules of\u00a0the\u00a0block-level HTML element used\u00a0as the container\u00a0for your JavaScript-based chart.<\/p>\n
          In Detail<\/h3>\n
          To\u00a0set the desired height in CSS, use the height<\/code> property. Likewise,\u00a0configure the width with the help of width<\/code>.<\/p>\n
          For instance, here’s how you can\u00a0specify\u00a0both custom height and weight:<\/p>\n
          #container {\r\n  height: 50%;\r\n  width: 50%;\r\n}<\/code><\/pre>\n
          Example<\/h3>\n
          Check out\u00a0an example of a chart where the height and width are set in the CSS rules:<\/p>\n
            \n
          • JS\u00a0Column Chart with Height and Width Set in CSS<\/a><\/li>\n<\/ul>\n
            \"JS<\/a><\/p>\n
            Further Learning<\/h2>\n
            These methods for controlling your chart\u2019s size should work well in most situations. However, we understand that specific cases, like embedding charts in dashboards<\/a>, might require a different approach. If you find yourself in such a situation, feel free to explore our documentation on creating dashboards. This will guide you through more advanced scenarios while ensuring everything remains straightforward:<\/p>\n
              \n
            • Dashboards | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
              Wrapping Up<\/h2>\n
              Need help or have questions? Simply comment right here below\u00a0or\u00a0ask our Support Team<\/a>\u00a0directly.<\/p>\n
              Stay tuned for\u00a0the\u00a0JavaScript Chart Tips<\/a> series on our blog as we’ll continue to share valuable tips and tricks\u00a0inspired by recent support cases from our customers.<\/p>\n
              Enjoy your journey with\u00a0JavaScript charting!<\/strong><\/p>\n