Conditional Coloring in eChart Menu

Introduction

This tutorial demonstrates how to apply conditional coloring to bar charts in Joget using the Chart Menu (Chart Library=Apache ECharts). The goal is to dynamically change the color of specific bars based on their values. For example, if a bar in a chart does not meet a target value, it will be highlighted in a different color to draw attention.

How does it work?

To differentiate Month 4 from other months in your bar chart based on its performance, you can use custom JavaScript code in the Custom Header of the eChart Menu. Instead of manually adjusting the color for each bar, this method allows you to automate the process. You’ll configure the eChart Menu to include a custom script that changes the color of bars based on specific conditions, such as whether a data point meets or fails to meet a target value. This approach ensures that months falling short of expectations are visually highlighted, making it easier to identify performance issues.

Here's a step-by-step breakdown of the process:

1. Start by setting up the chart with your list and X-axis values.
   
2. Ensure that the number values and colors are correctly configured.
   
3. Before you can modify the chart, you need to identify its ID. Inspect the chart during runtime to locate the ID.
   
   
   
4. Once you have the chart ID, you can implement the JavaScript code to change the bar colors conditionally.
5. Insert the following code in the eChart Menu > Advanced > Custom Header section:
   

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

   This code compares the bar values against the target (line) values and changes the color of the bars that do not meet the target.

Expected outcome

After completing the steps above, your bar chart will automatically apply conditional coloring. Bars that fall below the target value will be highlighted in red, making it easier to identify underperforming data points at a glance.

Download sample app