Introduction

This tutorial will demonstrate how to set conditional coloring when using the Chart Menu (Chart Library = Apache ECharts). Let's use the image below as an example. In this case, we want to set Month 4 to a different color as it did not reach the target value we had set in the list. Instead of setting the bar chart individually, we can instead set some custom code in the Custom Header of the eChart Menu.

Figure 1: Form Details


Configuration

Figure 2: List and X-axis Value


Figure 3: Number Values and Colors


Figure 4: Bar Chart before conditional coloring


Before we can move on to the coding part, we will also need to find the ID of the chart. We need this in order to change the color 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 color of the bar in accordance with the target. You can set this code in eChart Menu > Advanced > Custom Header.

Javascript
<script>
$(document).ready(function() {
  //Declare the eChart
  var myChart = echarts.init(document.getElementById('chart-0988532D5C354976BBFD2DE4E3C16A6A'));
  var option = myChart.getOption();
  // Change bar color dynamically based on condition
    var lineData = myChart.getOption().series[0].data;
    var barSeries = myChart.getOption().series[1].data;
    
    for (var i = 0; i < barSeries.length; i++) {
      var barValue = parseFloat(barSeries[i]);
      var lineValue = parseFloat(lineData[i]);
    
      if (barValue < lineValue) {
        option.series[1].data[i] = { value: barValue, itemStyle: {color: 'red'} };
      }
    // Update chart with modified options
    myChart.setOption(option);
    }
    
});
</script>


After implementing the code, the bar chart will look something like this.

Figure 6: Conditionally colored bar chart


Download the Sample App

  • No labels