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,
    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.