Definition

The context refers to the DOM element a chart is appended to. Since the root element of a chart is an SVG, the context can be about any HTML element that can host an SVG. We commonly use a div element as context in our examples.

Sizing

A chart takes up 100% of the height and width of it's context. Define the chart's size by setting the dimensions of the context. The example below shows the context of a 400-by-800 chart.

                
                    <div id="chart" style="height:400px;width:800px">

                    </div>
                
            

Responsiveness

When the size of the context changes following a window resize, the size of the chart changes accordingly. We recommend using responsive web design to control the size of the context, and consequently that of the chart. In the following example, we use Bootstrap's grid system to create a flexible layout that will adapt to the viewport's size. We also set the context's aspect ratio. As opposed to the first example, the chart's size changes when you resize the window.

                
                    <div class="row">
                        <div class="col">
                            <div id="chartFlex" style="aspect-ratio:2/1">

                            </div>
                        </div>
                    </div>