How to make the Chart responsive during page resize?

You can make the Essential Chart responsive, that is, resizing the Chart automatically during browser resize, by enabling the canResize property of the Chart. The default value of this property is false. Essential Chart is resized based on its parent container width and height. Hence, responsiveness of the Chart depends upon the responsiveness of its parent container. The following code example illustrates this.

JS

$("#container").ejChart({
    //Make Chart responsive by enabling canResize property
    canResize: true,
});

The following screenshot illustrates the Chart before resizing the page.

Figure 1: Chart before resizing the page

The following screenshot illustrates the Chart after resizing.

Figure 2: Chart after resizing

JS Playground sample link: Responsiveness