Introduction

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


Javascript
<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


Troubleshoot

If you face issues like the bars in the chart are overlapping due to large dataset, see figure 8:


Figure 8: Overlapping bars due to large dataset

This might occur when the barWidth is set as an absolute value in the echart config, Echart Menu → Properties → Additional Customization (see figure 9), causing bars to remain fixed regardless of the chart's dimensions. For example, using a fixed value like 10 can lead to overlap.


Figure 9: overlapping bars due to absolute value


Adjusting the barWidth to a percentage value will solve this issue. When specified as a percentage, such as '70%', the width of each bar adapts relative to the available space in the chart, preventing overlap and ensuring data labels remain visible, after changing to a percentage the bars will look like this, see figure 10:


Figure 10: Responsive bars due to percentage

barWidth:'70%',


Download the Sample App

APP_kb_dx8_Dynamic BarchartHeight.jwa


  • No labels