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


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


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.

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

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

Figure 6: Conditionally colored bar chart

Download the Sample App

  • No labels