Bar graph

Notes on creating a Bar graph



Ideally it would be best to have a center of gravity at 0 and then have additions shoot upwards and deletions shoot downwards. However it requires one to handle cases where there is no deletions for instance. And also should the up/down max value be uniform or? A simpler approach is to just account for additions. Simple design that is very similar to how the Graph is setup.

5 vertical indicators (amount of addition deletions)

similar design as Graph (0,1,2,3,4,5,6)

7 Horizontal indicators (days per week)

m,t,w,t,f,s,s Horizontal Gradient colors or?

How do you handle values that are near 0 or near max?

basically if a time-unit has value, you render the bar. If its lower than a circle height, then render circle hight. Just clamp the height applied to the bar with a min and max value before you render it. If the value is equal to 0. You don’t render the bar-graph


Handle gestures just like you did in the GitSyncGraph. But also add a debug layer that shows the points of touch. Similar to how Framer does it.

  • This feature needs research.
  • How do you find coordinates to touch points, how do you then position these relative to the NSView.
  • Might need some ratio calculations to get the right look and feel.


  • When you transition from one time-range to another each BarGraph animates with an EaseInOut tween.
  • If the value becomes 0, then you init an alpha tween that lasts 0.2 sec and end with alpha:0,
  • If the GraphBar is alpha: then you tween the alpha to 1 over 0.2 sec and at the same time animate the GraphBar to it’s destiny.
  • We never remove or hide GraphBar’s they are simply re-used


use css to style the BarGraph Elements. Solid fill that has 7 different colors. Staring from blue on day:1 and blends to red on day 7. Use A gradient (because it can hold 2 colors) in css and then just use NSColor.color1.blend(fraction:i/7,to:color2) Or use darkblue bg and purple bars that increase in alpha if the y-Value is high etc


let graphContainer = addSubView(Container(width,height,self,"graph"))
let graph = graphContainer.addSubView(BarGraph(200,200/*,4*/,graphContainer))
_ = graph

Nice interactive inspiration: