| Table of Contents |
|---|
Introduction
| English |
|---|
This tutorial will demonstrate how to dynamically change the bar chart height with the amount of data using the Chart Menu (Chart Library = Apache ECharts). Let's use the image below as an example. |
Figure 1: Form Details
In this case, we want the bar chart height to change dynamically as the data volume increases or decreases, Instead of changing the height in the echart config, we can instead set some custom code in the Custom Header of the eChart Menu.
Configuration
Figure 2: List and X-axis Value
figure 3: Number Values and Colors
Figure 4: Bar Chart before changing the height dynamically
Before we can move on to the coding part, we will also need to find the ID of the chart. We need this to change the height of the bar via Javascript. You can do so by inspecting the chart during run time.
Figure 5: Chart ID
Implementation
Now that we have a clear understanding of our configuration, let's proceed to write the JavaScript code that will dynamically alter the height of the bar in accordance with the data. You can set this code in eChart Menu > Advanced > Custom Header.
Figure 6: Configuration
| Code Block | ||
|---|---|---|
| ||
<script>
$(document).ready(function() {
// Function to calculate the desired height dynamically
function calculateChartHeight() {
// Example: Calculate the height based on the window inner height
return window.innerHeight * 0.8; // Adjust the multiplier as needed
}
// Dynamically set the height of the chart container div
var chartContainer = document.getElementById('chart-084C515C911443A28B2579DB41D4BC20');
if (chartContainer) {
chartContainer.style.height = calculateChartHeight() + 'px'; // Set the height dynamically
}
// Optional: Adjust the height on window resize
window.addEventListener('resize', function() {
if (chartContainer) {
chartContainer.style.height = calculateChartHeight() + 'px'; // Set the height dynamically on resize
}
});
});
</script> |
After implementing the code, the bar chart will look something like this.
Figure 7: Dynamically adjusted bar chart
| Info | ||
|---|---|---|
| ||
If you face issues like the bars in the chart are overlapping due to large dataset, see figure 8: This might occur when the Figure 9: overlapping bars due to absolute value Adjusting the Figure 10: Responsive bars due to percentage
|
Download the Sample App
| View file | ||||
|---|---|---|---|---|
|