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