In this article, we will explore the colour customisation possibilities that Oracle APEX offers for Oracle JET charts.
The no-colour-set approach
By default, APEX uses the colours defined in the Theme Roller colour palette. This is a great approach for simple applications and does, at least, ensure colour consistency across applications. However, there are some disadvantages to this approach:
- Limited customisation options. The Theme Roller colour palette only offers 15 colours. If you have more values in your charts, the colours will be reused as in the example below.
- Difficult to maintain. If you need to make changes to the colours in your application, you will need to edit the Theme Roller settings.
- Conflicts with other areas of the system. The theme roller is used for colouring the entire application. This includes sidebars, navigation bars, region headings and more. You may want to reserve the palette for controlling the main application look and feel and have different colours specifically for charts.
- Accessibility issues. A colour-blind person might have issues while using your application.
To learn more about this or other features of the APEX Universal Theme, you can check out this application and webinar here.
The declarative approach
The declarative approach lets you set the colour of a series from the series' attributes panel. You can easily set a colour for your series by typing the hexadecimal colour code, selecting it from the suggested list, or using the colour picker.
This approach, like the previous one, is ideal for simple systems and can be used for certain types of charts. For example, a one-colour bar chart may be visually appealing, but a pie chart with the same colour scheme would not be as effective.
The colour array can be defined in a variety of places, and you can allow your creativity to run wild, depending on your needs. For instance, you could allow an administrator or any user to choose their own colours, or you could use a third-party library to generate shades of a single base colour.
The most important thing is that your colour array will eventually look like this.
var myColors = ["#de3b3b","#e6564f", "#ed6e63","#f38378", "#f8988d", "#fcada3", "#ffc2b9", "#ffd6d0", "#ffebe7", "#ffffff"];
This method may work well in most cases, but it has its drawbacks. For example, the colours will be applied randomly, depending on the order of the array and values. This can be inconvenient if you want to apply a specific colour to a specific value type.
If you want to understand the customisation process for Oracle JET Charts, you can read a full description of the process in this blog post.
The SQL approach
The SQL approach is the most versatile method, as it allows you to colour the bars of a bar chart based on any criteria that you can define in a SQL query. This makes it ideal for situations where you need to apply specific colours to specific values.
The following is an example of a query that creates a new column called
BAR_COLOR in the result set based on a
CASE statement for the
Now, we can use the
BAR_COLOR column to set the colour of the bars in the chart. This can be done in the
Color section under
Appearance on the
Chart Series level.
Please note that in this case, it would be straightforward to implement a solution that allows users or power users to set their own colours.
The colours of your chart should be dynamically generated by the query.
The methods we have explored allow us to handpick colours for different needs. Oracle APEX once again demonstrates its unique ability to span the application development spectrum, from no-code to low-code to high-control.
Find out more about our APEX services