highcharts positioning and colour

Question

I have a few things I can't see to fix with my chart in highcharts-ng, see this http://jsfiddle.net/mcneela86/DJVP2/ for reference:

As a background, the chart will display a comparison of before and after values for horse power and torque in cars, after parts have been added.

1: I have grouped the data into 'before' and 'after', can I have the 'before' gourp coloured differently than the 'after' group. the colour of the 'after' group is correct, the 'before group' needs to be shades of grey?

2: I need to make the columns wider (while keeping them responsive). I thought the way to do this would be reducing the padding around the columns (see below) - but this won't work for me?

groupPadding: 0,

3; The third button (Stage 4 (new engine)) contains data with zero/null values, is it possible to have the data that remain spread across the whole graph? (so it doesn't look like there is something missing)

{
    "after_hp":1000,
    "after_torque":900,
    "before_hp": null,
    "before_torque":null,
    "name":"Stage 4 (new engine)"
 }

the 'null' values above can be null or '0' - I can control the data.

I have spent days trying to fix these issues and would really appreciate any help.

EDIT:

I found a solution for the first question above:

See this jsfiddle - http://jsfiddle.net/mcneela86/6caPj/ I used a workaround of targeting the data with css, while this works for my case it me not be ideal for larger data sets.

Hope this helps someone.

score 0 · Answer 1 · answered May 05 '14 at 10:33

2) You can manipulate only groupPadding/pointPadding/pointWidth, but you have also ability to catch $(window).resize() or load.redraw() and update serie with new paraemters, described abo

3) You can try to call setExtremes() skipping 0, i.e as 1,1. or set min value as 1, on xAxis.

http://api.highcharts.com/highcharts#Axis.setExtremes

highcharts positioning and colour

1 Answers1