How to show Profit or loss percentage for each month in a bar chart?

2.4k Views Asked by At

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.

enter image description here

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

enter image description here

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.

0

There are 0 best solutions below