Introduction & helpful links
In the following blog post I will try to explain the options you have to modify your APEX JET powered charts. There are different ways to change certain parts of them, some are easier and straight forward, others require more complex approach and writing some Javascript and CSS. In the first part, I will go through the basic settings available in APEX as declarative options. The second part will include modification of the JavaScript Initialization Code of our Chart region.
Notes
- I would recommend that you always check the APEX built-in help first. It is available in the middle section of your
Page Desiner, under theHelptab. Once you click any element of the Page Designer, a help text is displayed in the Help section. In most cases it will be fully enough for you to understand what are you options for the selected element and what each one of them mean.
- Next place to go when you need to know more about certain APEX functionality is the
APEX Documentation. Here is a LINK to theCharts Sectionfor version 20.2. My observations are that it is almost the same content as the built-in help on charts, but in any case it is worth checking it. - Check this APEX Sample Charts application. There are samples with all of the charts types you can use in APEX. What’s cool here is that many of the examples have explanation and source code included.
- Speaking about charts, and especially JET charts, the next place to go if you want to utilize their full power is the JET Cookbook with tons of examples and JET Documentation. Now, since Oracle JET has a lot more than charts and it can be used independently of APEX, the samples given are more general and not presented in the exact same way you would use them in APEX. In my next blog post I will give you some hints on how to read those examples, navigate in the documentation and ultimately change the way your APEX charts look.
Modifying APEX charts colours
You will in general have some options that are available for all types of charts. Some of them are Color, under the Appearance section, Link section, Label section (where you can change the Font Family, Font Style, Font Size and Fond Colour, as well as apply custom CSS code).
Some of the most modified properties of a chart, are it’s colours. There are at least two way you can do that:
1. Declaratively
First you need to modify your SQL statement (REST Source, etc.) so that it contains a column with the desired colour. Take this example:
select a.*,
case type
when 'Walk' then '#3FD2C7'
when 'Public Transport' then '#99DDFF'
when 'Drive Car' then '#00458B'
when 'Ride Bike' then '#3CBCC3'
end bar_colour
from (
select 'Walk' Type, 25 Percentage from dual union all
select 'Public Transport' Type, 10 Percentage from dual union all
select 'Drive Car' Type, 20 Percentage from dual union all
select 'Ride Bike' Type, 45 Percentage from dual
) a
Here I have used a column, named bar_colour, as its value is different for each type of transportation I have on my chart. Note that the values are the HEX representations in this case, but you can also use wording such as green, red, yellow, etc.
The other thing you need to do is add the following substitution string &BAR_COLOUR. in the Appearance section, under Color property. It will basically set the value from bar_colour column in your query.
This is an example of a Donut chart, but this approach is the same for other types of charts too. For more examples, check out my DEMO.
2. Using JavaScript Initialization Code
To do that, you need to initialize your chart by going to Attributes > Advanced > JavaScript Initialization Code section of your chart region.
Here is the JavaScript code I’ve used to change the colours of my Donut chart:
function( options ){
options.dataFilter = function( data ) {
data.series[ 0 ].color = "#3FD2C7";
data.series[ 1 ].color = "#99DDFF";
data.series[ 2 ].color = "#00458B";
data.series[ 3 ].color = "#3CBCC3";
return data;
};
return options;
}
Note that in this case you don’t need to have bar_colour column in your SQL query and use it in the Appearance section.
This is an example of changing the colours for a Donut chart. It is slightly different for the other types (more examples in the DEMO). A Bar chart for example would have some of its colours changed by that JavaScript Initialization Code:
function( options ){
options.dataFilter = function( data ) {
// Custom set of bars colours
data.series[ 0 ].items[0].color = "red";
data.series[ 0 ].items[1].color = "red";
data.series[ 0 ].items[5].color = "red";
data.series[ 1 ].items[0].color = "yellow";
data.series[ 1 ].items[1].color = "yellow";
data.series[ 1 ].items[5].color = "yellow";
data.series[ 2 ].items[0].color = "blue";
data.series[ 2 ].items[1].color = "blue";
data.series[ 2 ].items[5].color = "blue";
return data;
};
return options;
}
As you can see, here we have more flexibility to change every individual element of the chart array. In my case those are the colours of the first, second and sixt months of the year (JavaScript arrays count start from 0). And the data series represent my types of activity on the chart.
Modifying APEX charts bar width, donut radius, etc.
1. Bar chart bar width
You can utilize a third dimension in your APEX Bar charts, by using the Z parameter. You can alter your SQL statement (REST Source, etc.) so that it contains a column with the desired value for your Z param. Depending on the distinct values, you will see how the bars would change their width, as the ones with small values will be thinner than the ones with higher values, which will be thicker. Take this example:
with year_months as (
select
rownum as month_num,
to_char(to_date(lpad(rownum,2,'0')||2021,'MMYYYY'),'Mon') month_text
from
dual
connect by level <= 12 ),
total_hours as (
select 1 month_num, 20 football, 7 running, 5 fitness, 500 calories_burnt from dual union all
select 2 month_num, 13 football, 12 running, 8 fitness, 1000 calories_burnt from dual union all
select 3 month_num, 34 football, 15 running, 9 fitness, 1500 calories_burnt from dual union all
select 12 month_num, 40 football, 15 running, 5 fitness, 1000 calories_burnt from dual )
select a.*, --5 all_calories_burnth, -- override the values above (if needed, bring back the values)
'<b>Type: </b>'||a.sport_type ||'<br>'||
'<b>Month: </b>'||a.month_text ||'<br>'||
'<b>Hours: </b>'||a.hours_count||'<br>'||
'<b>Callories burnt: </b>'||a.calories_burnt tooltip_text
, case sport_type
when 'football' then '#3FD2C7'
when 'running' then '#99DDFF'
when 'fitness' then '#3CBCC3'
end bar_colour
from (
select * from (
select ym.month_num, lpad(ym.month_num,2,'0')/*||' '||ym.month_text*/ mnt,
ym.month_text, fh.football, fh.running, fh.fitness, fh.calories_burnt
from year_months ym
join total_hours fh
on ym.month_num = fh.month_num )
UNPIVOT(
hours_count -- unpivot_clause
FOR sport_type -- unpivot_for_clause
IN ( -- unpivot_in_clause
football AS 'football',
running AS 'running',
fitness AS 'fitness'
)
)
) a
order by month_num asc
Now you just need to use the calories_burnt column in your Column Mapping section for the Z property.
As you can see, another cool thing available is the custom tooltip you can produce, using the Custom Tootip property. For that purpose, you need to define a custom text (HTML can also be used) in one of your columns – in my case tooltip_text column.
2. Donut chart radius
The radius of a Donut chart, and respectively the thickness of the circle can be changed using a JavaScript Initialization Code in Attributes section of your Chart region applied:
function (options) {
$.extend( options.styleDefaults, { pieInnerRadius: 0.75}) ;
return options;
}
The value can vary between 0 and 1, as 1 means bigger radius and thinner circle.
Other chart attributes
Here is a small list of other attributes that you can change. The full API list can be found HERE.
function( options ){
// Set chart initialization options
options.type = "bar";
options.plotArea = { //borderColor: "red",
//backgroundColor: "white",
//borderWidth: 0.5,
rendered: "on" // "on" | "off"
}
// https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#Legend
options.legend = { // backgroundColor: "grey",
position: "bottom", // "start" | "end" | "bottom" | "top" | "auto"
rendered: "on", // "on" | "off"
titleHalign: "start", // "center" | "end" | "start"
title: "Hours spent by activity",
textStyle : { color: "#aaaaaa",
cursor: "auto",
fontFamily: "sans-serif",
fontSize: "1.2rem",
fontStyle: "italic",
fontWeight: "bold",
textDecoration: "overline"
},
sections: { legendSection: {items: {legendItem: {markerShape: "circle"} } }
}
}
// https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#LegendItem
options.legendItem = { symbolType: "marker", // "image" | "line" | "lineWithMarker" | "marker"
markerShape: "circle" // "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string
};
options.xAxisLineColor = "#9E9E9E";
options.xAxisLineWidth = 2;
options.plotArea = {
backgroundColor: "#eeeeee",
borderColor: "#c1c1c1",
borderWidth: 1
}
options.yAxis = { majorTick:
{
lineColor : "#c1c1c1",
lineWidth : 1,
lineStyle : "solid"
}
}
//$.extend( options.attributes, { otherColor: '#e85d89' }) ;
//$.extend( options.styleDefaults, { barGapRatio: 0.5, maxBarWidth:16 }) ;
return options;
}
To view all of the above Charts live in an APEX application, visit the DEMO.
In the next blog post on charts, I will explain how to easily get yourself oriented in the JET Documentation and modify the code so it can be used in the JavaScript Initialization Code section.
APEX App Lab 
Hello Plamen, this tutorial is great! I loved the video showcasing the power of APEX JET charts as well on YouTube. Do you think you can expand on this topic more?
I’m currently struggling on how to replace a number on a data-label and converting that number into Hours and Minutes. From the documentation for data-label, “A function that returns a custom data label. The function takes a DataLabelContext argument, provided by the chart. “
LikeLike
Thanks James!
As you’ve already seen, the JET documentation is huge. And it is very specific for the different types of charts, available in APEX. Regarding your case, do you have a demo of the chart you’re trying to modify? I’m curious to see it.
LikeLike
Hi But How I do Modify the custom css let’s say I’f I want to insert one Hr tag above labels.
LikeLike
Hi, i have a question about one of your solution that you made on Demo page. Async function. I try any solution in my system, even your code from webside and nothing work. They dont w8 for anything, just go with a flow like async, await doesnt exist.
LikeLike
Hello Plamen, this tutorial is great! can you please help me with a problem?
I’m trying to display a vertical and horizontal line on a bar chart, the lines are here but now all i need is to change the starting and ending points of the lines, could you please help me solving the issue, i’ve written the javascript code for the lines.
Also can you please share your email address so that i can share the more detail with you.
function (options) {
var value1= apex.item(‘P159_TOTAL_VALUE_1’).getValue();
var value2 = apex.item(‘P159_TOTAL_VALUE_2’).getValue();
options.yAxis = {
referenceObjects:[
{
text:value1,
type: ‘line’,
value: value1,
color: ‘#FF0000’,
displayInLegend: ‘on’,
lineWidth: 2,
location: ‘front’,
lineStyle:’solid’
},
{
text:value2,
type: ‘line’,
value: value2,
color: ‘#FF0000’,
displayInLegend: ‘on’,
lineWidth: 2,
location: ‘front’,
lineStyle:’solid’
}
]
};
options.xAxis = {
referenceObjects: [
{
text: ‘Vertical Line’,
type: ‘line’,
value: 0.6,
color: ‘#000’,
displayInLegend: ‘on’,
lineWidth: 2,
location: ‘front’,
lineStyle: ‘solid’
}
]
};
return options;
}
LikeLike
Hello,
I would like know if is possible create Bar Chart in 3D mode. If yes, how do you do, please.
Thank you!
LikeLike