Two colors for one series

Two colors for one series example

When representing data on a bar chart, it is possible to want to represent this data with a different color depending on a condition on the value. For example, green for a target achieved, red otherwise.

You would then need to be able to have:

• both colors in the legend
• the color associated with the current value in the tooltip or popover

For this example, we have chosen to put the data in two series depending on whether or not the objective has been achieved. In this way, the two colors are clearly visible both on the graph and in the legend.

On the other hand, this requires us to filter the values displayed in the tooltip so as not to display the series of a target that has not been reached when it has been reached and vice versa.

This filter is created using tooltip value formatter in the default Apache ECharts configuration, and to send back undefined if we don't want the value to be displayed:

tooltip: {
  formatter: function (params) {
    return (
      params[0].value ? Math.round(params[0].value * 100) / 100 + '$' : undefined
    );
  }
}           
              

themeManager.externalizePopover(undefined, {
  ...ODSCharts.ODSChartsPopoverManagers.NONE,
  getPopupContentValue: ({ seriesName, itemValue }) =>
    itemValue ? Math.round(itemValue * 100) / 100 + '$' : undefined,
});            
                

In the example below, we prefer the Apache ECharts tooltip.formatter method.