Creating your Own Chart Container

Zoomdata provides a reference to an HTML DIV element that developers can use as a container for their charts. This element is accessed via the controller.element property. Sometimes, it is useful to create an inner chart container inside the controller.element div to gain full control over its styling via the CSS chart components.

Example:

// In visualization.js

var chartContainer = document.createElement('div');
chartContainer.style.width = '100%';
chartContainer.style.height = '100%';
chartContainer.classList.add('chart-container');
controller.element.appendChild(chartContainer);

To add a border around the chart container

/* In styles.css */

div.chart-container {
  border: 1px solid black;
}

Now you can use the div with the class “chart-container” to render your chart.