Highcharts/highstock set yAxis Min and Max with Scroll

1
votes

I have a stacked column highstock chart with positive and negative stacks and a horizontal scrollbar. I am trying to have the yAxis with min and max values according to the max data and min data so I've setup those values (after calculating them) in highstock's json.

However, the length of the names of the users on the xAxis are overriding these max values, is there a way around that?

Here's my js fiddle: http://jsfiddle.net/fj6d2/3931/

As the code is too large to be posted here, here's the configuration without all the data:

Highcharts.chart('container', {

    "chart":{
   "type":"column"
},
"title":{
   "text":""
},
"xAxis":{
   "min":0,
   "max":31,
   "categories":[
      "Xxx Xxxx",
      "Xxx Xxxx",
      "Xxx Xxxx",
      "Xxx Xxxxx",
   ],
   "labels":{
      "style":{
         "font-size":"12px"
      },
      "useHTML":true,
      "events":{

      }
   }
},
"scrollbar":{
   "enabled":true,
   "barBackgroundColor":"gray",
   "barBorderRadius":7,
   "barBorderWidth":0,
   "buttonBackgroundColor":"gray",
   "buttonBorderWidth":0,
   "buttonArrowColor":"yellow",
   "buttonBorderRadius":7,
   "rifleColor":"yellow",
   "trackBackgroundColor":"white",
   "trackBorderWidth":1,
   "trackBorderColor":"silver",
   "trackBorderRadius":7
},
"yAxis":{
   "title":{
      "text":"Time (hh:mm)"
   },
   "tickInterval":600,
   "labels":{

   },
   "gridLineWidth":0,
   "plotLines":[
      {
         "value":0,
         "width":1,
         "color":"#000",
         "zIndex":4
      }
   ],
   "tickmarkPlacement":"on",
   "max":45336,
   "min":-21443
},
"plotOptions":{
   "column":{
      "stacking":"normal",
      "events":{

      }
   }
},
"credits":{
   "enabled":false
},
"tooltip":{
   "shared":true,
   "crosshairs":true
},
"legend":{
   "align":"right",
   "verticalAlign":"top",
   "itemStyle":{
      "display":"none"
   },
   "title":{
      "text":"Click a colour"
   }
},
"series":[
   {
      "name":"On Task Teacher Recommended",
      "data":[
         487,
         13512,
         10064,
         2664,
      ],
      "color":"#86E067",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   },
   {
      "name":"On Task Student Discovered",
      "data":[
         1276,
         5495,
         1307,
         3369,
      ],
      "color":"#5CB5E5",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   },
   {
      "name":"Uncategorised",
      "data":[
         944,
         12202,
         2920,
         4643,
      ],
      "color":"#F98157",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   },
   {
      "name":"Off Task",
      "data":[
         -126,
         -686,
         -1998,
         -927,

      ],
      "color":"#E3454D",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   }
]


});
1
highchartshighstock

1 Answers

2
votes

you can truncate long name (xAxis) of highcharts using function

function truncString(str, max, add){
   add = add || '...';
   return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};

And call this function in formatter

   "labels":{
        "formatter": function() {
                   return truncString(this.value,8,'...')
                },
      "style":{
         "font-size":"12px"
      },
      "useHTML":true,
      "events":{

      }
   }

Fiddle demotruncated categories