Oracle APEX Chart Colors

I’ve been on a mission to make the applications we build look clean and professional. I’ve always been on a mission to make them maintainable. I also want them to be easily “branded” for different customers. In APEX, one way to help with all of this is to use the colors that are defined in the theme, that is, the colors that are in the color palette of Theme Roller. Importantly, you don’t want to copy the hex values, you want to reference the values either by using classes are by referencing the css variables. You can find these in the Universal Theme sample application or at this URL: https://apex.oracle.com/pls/apex/r/apex_pm/ut/css-variables

Unfortunately, APEX charts do not do this by default. I found this great blog post by Tomáš Kucharzyk that describes how to change the colors of APEX charts and how to do a lot of other very cool things. It does not, however, mention how to tie it to the APEX CSS variables. After reviewing the blog post, though, I came up with the following two blocks of code. Both go in the Initialization Javascript Function of the chart attributes.

This code works for some chart types (multi-series charts):

function(options) {
  let listOfPatterns = [    
    "smallChecker", "smallTriangle", "smallCrosshatch", "smallDiagonalLeft",
    "smallDiamond", "smallDiagonalRight", "largeChecker", "largeCrosshatch", "largeDiagonalLeft", "largeDiagonalRight", "largeDiamond",
    "largeTriangle", "auto"
  ];

  let listOfColors = [
    "--u-color-1", "--u-color-2", "--u-color-3","--u-color-4", "--u-color-5", "--u-color-6","--u-color-7", "--u-color-8", "--u-color-9",
    "--u-color-10", "--u-color-11", "--u-color-12","--u-color-13", "--u-color-14","--u-color-1", "--u-color-2", "--u-color-3","--u-color-4", "--u-color-5", "--u-color-6","--u-color-7", "--u-color-8", "--u-color-9",
    "--u-color-10", "--u-color-11", "--u-color-12","--u-color-13", "--u-color-14"
    ];

  options.dataFilter = function (data) {
    for (let i = 0; i < data.series.length; i++) {
      let color = getComputedStyle(document.documentElement).getPropertyValue(listOfColors[i % listOfColors.length]).trim();  
      data.series[i].color = color;
      data.series[i].borderColor = color;
      //data.series[i].pattern = listOfPatterns[i % listOfPatterns.length];
    }
    return data;
};
return options;
}

This works for single series charts:

function(options) {
  let listOfPatterns = [    
    "smallChecker", "smallTriangle", "smallCrosshatch", "smallDiagonalLeft",
    "smallDiamond", "smallDiagonalRight", "largeChecker", "largeCrosshatch", "largeDiagonalLeft", "largeDiagonalRight", "largeDiamond",
    "largeTriangle", "auto"
  ];

  let listOfColors = [
    "--u-color-1", "--u-color-2", "--u-color-3","--u-color-4", "--u-color-5", "--u-color-6","--u-color-7", "--u-color-8", "--u-color-9",
    "--u-color-10", "--u-color-11", "--u-color-12","--u-color-13", "--u-color-14","--u-color-1", "--u-color-2", "--u-color-3","--u-color-4", "--u-color-5", "--u-color-6","--u-color-7", "--u-color-8", "--u-color-9",
    "--u-color-10", "--u-color-11", "--u-color-12","--u-color-13", "--u-color-14"
    ];

  options.dataFilter = function (data) {
    for (let i = 0; i < data.series.length; i++) {
        for (let j = 0; j < data.series[i].items.length; j++) {
            let color = getComputedStyle(document.documentElement).getPropertyValue(listOfColors[j % listOfColors.length]).trim();  
            data.series[i].items[j].color = color;
            data.series[i].items[j].borderColor = color;
            //data.series[i].pattern = listOfPatterns[i % listOfPatterns.length];
        }
      }
    return data;
    };
return options;
}

In both cases I left in some code from Tomas’s blog to change the fill pattern. You can enable the pattern by uncommenting the commented line in the code above.

The nice thing about this approach is that if you ever change the theme, or the color palette, all of your charts that have this code will automatically have the new colors applied.

By changing the color of “Color 1” in the color palette, my chart’s bottom color changes automatically.

Exercise

If you implement the custom patterns found in Tomas’s blog, you can do the same thing by referencing the theme colors via the variables instead of hard coding them in his javascript file. That’s an exercise left to the reader, but it is very straightforward.