I have a bar chart where the first three series represent the expenses and the last series represent the revenue. I want to show the profit or loss for each month in percentage. Below is the image of current graph.
Here is my code for the same.
var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];
$.jqplot.config.enablePlugins = true;
var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'n',
},
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 55,
barDirection: 'vertical',
},
},
series: [
{
label: 'Equipment',
color: '#c5b47f'
},
{
label: 'Salaries',
color: '#eaa228'
},
{
label: 'O&M',
color: '#4bb2c5'
},
{
label: 'Revenue',
color: '#579575',
disableStack: true
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I want it to show the profit or loss as shown below
I'm trying to achieve this by three different approaches.
1) First approach is with pointLabels. With pointLabel I have to use 'stackedValue:true'
which does not give me individual value of the series in a stack. Secondly, the position of the pointLabel is above the stacked bar and not above the group.
2) Second approach is to add a trendline. But the problem is y-axis values are in absolute number and the values of the trendline will be in percentage. Is it possible to show the percentage series in the same chart ?
2) Third approach is to calculate the % profit or loss for each month and then display it by inserting a div into the graph for each month. Sounds tricky but is it feasible ?
Any different approach from your side most welcome.