ONSvisual/Simple-charts

Automatically dropping x axis

Opened this issue · 1 comments

I came across unexpected behaviour in the Line template, I had an axis that did not start at 0 and the x axis moved off the chart and out of the margin as a result.

I found it was caused by this code

//create x axis, if y axis doesn't start at 0 drop x axis accordingly

svg.append('g')   
  .attr('class', 'x axis')  
  .attr('transform', function(d){
    if(yDomain[0] != 0){
      return 'translate(0,' + (height + 30) + ')'
        } else {
          return 'translate(0,' + height  + ')'
        }
      })
  .call(xAxis);`

As you can see the axis gets moved downwards by 30 pixels if the x scale does not start at 0. Is there a time when this functionality is necessary? It was not in my case and I feel like it will cause more unexpected bugs than help? Can always add a variable to the config if we want to make it easy to move the x axis down by a certain number of pixels.

We used to drop the x-axis and draw two little lines to show that the x-axis was shortened. A bit like this

image

I think this would be useful when the y-domain is more than but not 0, e.g. 50-90, but would be less useful if -40 to 70. I do think if there isn't a line to help define the x-axis it looks better with the x-axis dropped