Resizing a Chart
All of the out-of-the-box charts in Zoomdata make use of a resize method to resize the chart when its parent container’s dimensions change.
Embedded charts can reuse the resize method to achieve the same functionality.
Example:
// declare a variable to store the visualized chart objects
let charts = [];
// this runs when the window is resized
const onWindowResize = () => {
charts.forEach(chart => {
chart.resize( $(chart.element.parentNode).width(), $(chart.element.parentNode).height(), ); });
};
let timeoutId;
window.onresize = () => {
// debouncing window.onresize
clearTimeout(timeoutId);
timeoutId = window.setTimeout(onWindowResize, 100);
};
// .... later inside an async function
const embedChart = async () => {
// ... some other code
const chart = await client.visualize({
config: queryConfig,
element: document.getElementById('root'),
source,
autoStart: true,
variables: visVariables,
visualization: chartName,
});
charts.push(chart); // push chart to charts array
};In this example, we use jQuery’s $.width() and $.height() methods to capture the chart’s parent element’s width and height in pixels.
We provide those values to the resize method which receives two arguments:
- newWidth {number}
- newHeight {number}
Try this example on CodeSandbox
When the chart renders, change the window dimensions to see the chart resize.
Updated Jan 10, 2019
