0

I am using angular-nvd3 to draw charts.

Is there an option do draw bar chart with an x-axis like this? 

    ***
    ***             ***
    ***     ***     *** 
    ***     ***     ***     ***
    ***     ***     ***     ***
 |  ***  |  ***  |  ***  |  ***  |
0am     1am     2am     3am     4am

I do not want to draw it this way:

  ***
  ***         ***
  ***   ***   ***
  ***   ***   ***   ***
  ***   ***   ***   ***
  ***   ***   ***   ***
  0am   1am   2am   3am

PS: angular-nvd3 is a wrapper for nvd3, which is a Re-usable charts for d3.js.

David
  • 4,785
  • 7
  • 39
  • 63

1 Answers1

1

I can't think of a clean way to do this. Not sure why you want to do it TBH - it looks a bit weird. But anyway - here's a hacky solution for NVD3 that you can port to AngularNVD3.

chart.rectClass('shift-right')

and then after you've done 

d3.select('#chart svg')
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

Put 

d3.selectAll('.shift-right').attr('x', '30');

This will shift all of the bars over by 30px.

http://jsfiddle.net/h7Lmkb4f/1/

jeznag
  • 4,183
  • 7
  • 35
  • 53
  • "Not sure why you want to do it TBH": Data I want to display are between 2 dates, but not for a specific date. Example: "There were 130 active users from 3pm to 4pm". – David Jun 27 '17 at 12:09
  • I've found this but still have no clue how to use in using angular-nvd3 : https://github.com/d3/d3-array/blob/master/README.md#histograms – David Jun 27 '17 at 12:16
  • For a histogram, it's just a bar chart with data pre-processed into bins. https://gist.github.com/daluu/6930fa129bffea638189 – jeznag Jun 28 '17 at 22:45