Specific series color

Specify the color of a series

You may want to specify the color of a series in the series itself, regardless of its index. This can happen if the number of series displayed changes but, for a specific type of data, you want to keep the same color regardless of the series' place in the list of series to be displayed. This means that the ordered list of colors to use will change according to the series displayed.

To freeze the color of a series, Apache ECharts provides the itemStyle.color option, which can be added to the series definition like this:

series: [
  ...
  {
    ...
    itemStyle: {
      color: 'var(--ouds-charts-color-categorical-tier-2)'
    }
  }
          

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.

Marker specific color

This example illustrates the case where one wishes to change the color of a point, for example, to highlight the fact that it is below a threshold.

In this example, we provide the line color (lineStyle) and the default color of points (itemStyle) globally for the entire series :

series: [
  ...
  {
    ...
    lineStyle: { color: 'var(--ods-categorical-12)', width: 2 },
    itemStyle: {
      borderWidth: 2,
      color: 'var(--ods-functional-2)',
      borderColor: 'var(--ods-categorical-12)',
    },
  }
          

series: [
  ...
  {
    ...
    data: [
      ...
      {
        value: 18,
        itemStyle: {
          color: 'var(--ods-pink-4)',
          borderColor: 'var(--ods-functional-5)',
        },
      }
      ...
      ],
  }
          

Bar specific color

This example shows the example of using two colors for a single series. But this time, we actually keep a single series, displayed once in the legend, while modifying the color of the bars that are below the objective.

To do this, we associate in the list of values the red color with the value below the objectives via the Apache ECharts itemStyle.color parameter:

series: [
  ...
  {
    ...
    data: [
      ...
      {
        value:results[i],
        itemStyle: {
          color: 'var(--ouds-charts-color-functional-negative)'
        }
      }          
    ]
  }