Setting Height & Width of JS Charts | JavaScript Chart Tips

▤ Summary

Our Support Team often gets inquiries about configuring custom chart sizes in various situations. The most recent question received via live chat was quite general: “How do I change the height of the chart?” No additional details or images were provided, so we addressed it as a general case, assuming it might look as shown below, and offered several possible solutions with relevant examples right away. For instance, add the following line of code to set the height of your JS chart as 50% with the help of the corresponding methods from the JavaScript API: To configure the width, act exactly the same way with the appropriate method: For more information, see these methods in our API reference: Check out an example of a chart where the height and width settings are specified using the JavaScript API: • JS Column Chart with Height and Width Set in JS API If your chart’s configuration is in JSON format, you likely already know that the name of every object in JSON corresponds to the name of a method or parameter in JavaScript. Here’s how you can add the height setting to your JSON configuration: The entire JSON chart configuration with both settings described above can look as follows: Check out an example of a chart where the height and width settings are defined in JSON configuration: • JS Column Chart with Height and Width Set in JSON Alternatively, you can specify the required width or height by adjusting the CSS rules of the block-level HTML element used as the container for your JavaScript-based chart. If you find yourself in such a situation, feel free to explore our documentation on creating dashboards.

▦ Linked Companies

AnyChart

$1M to $5M