CODEWITHSUNDEEP
javascripthighcharts
BJax
BJax

Reputation: 153

Adding Total Column to Highcharts column range

I am using Highcharts to build a graph where employees can view there schedule on a given week. Ideally I would like to have a total column that shows the total hours scheduled and worked on a given day.

Originally I built a table next to the graph with the goal of keeping track of the total there, but with how dynamic highcharts is it is difficult to keep the rows aligned.

Here is a link to a JSFiddle with a slimmed down version of what I have so tried. If you click the pto legend button you can see Highcharts dynamically change which is why having a table next to the graph does not work very well.

I thought that using the stackLabels attribute might work for what I wanted to do, but I was not able to get it to work. 

yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },

I have been able to add the total comparison to the legend as this question describes, but it would be a lot clearer to have the totals in the same row as the data bars.

In essence what I am going for is the following.

            8am . 10am   12pm .  2pm .   4pm       Tot. Worked . Tot Schedu.

      Jan 1     -- Worked --------                     4.5            4 
                 --- Scheduled --                             

      Jan 2 .           -- Worked --                   3.5            4
                         --- Scheduled --

Thank you so much for your help! You are the best!

Upvotes: 1

Views: 710

Answers (2)

pawel_d
pawel_d

Reputation: 3070

You could also increase right margin and render texts for each points inside chart area. Take a look at the example below.

API Reference:
https://api.highcharts.com/highcharts/chart.marginRight
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer.html#text

Example:
http://jsfiddle.net/haLr101e/

Upvotes: 0

BJax
BJax

Reputation: 153

You can achieve the totals by with a separate table like you were doing if you set a Min and Max for the xAxis. This prevents Highcharts from resizing the rows when one of them does not have data.

JSFiddle 

xAxis: {
    //... other values 
    min: Date.UTC(1,1,3,0,0,0),
    max: Date.UTC(1,1,7,0,0,0),
  }

Upvotes: 1

Related Questions