y-axis is short

First of all, thanks for the library. Keep up the good work!

Describe/explain the bug The y-axis is shorter than the tallest bar

To Reproduce

import React, { Component } from "react";
import { ResponsiveBar } from "@nivo/bar";
import "./NivoBarChart.css";

const data = [
  { year: "2011", papers: 190 },
  { year: "2012", papers: 61 },
  { year: "2013", papers: 31 },
  { year: "2014", papers: 106 },
  { year: "2015", papers: 109 },
  { year: "2016", papers: 16 },
  { year: "2017", papers: 16 },
  { year: "2018", papers: 16 },
  { year: "2019", papers: 16 }
];

class NivoBarChart extends Component {
  render() {
    return (
      <ResponsiveBar
        data={data}
        keys={["papers", ]}
        indexBy="year"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.1}
        colors={{scheme: "nivo"}}
        colorBy="id"
        borderRadius={10}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "year",
          legendPosition: "middle",
          legendOffset: 32
        }}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
        }}
        theme={{
          tooltip: {
            container: {
              background: "black",
              color: "white",
              fontSize: "inherit",
              borderRadius: "2px",
              boxShadow: "0 1px 2px rgba(0, 0, 0, 0.25)",
              padding: "5px 9px"
            },
            basic: {
              whiteSpace: "pre",
              display: "flex",
              alignItems: "center"
            },
            table: {},
            tableCell: {
              padding: "3px 5px"
            }
          },
          axis: {
            domain: {
              line: {
                stroke: "#000",
                strokeWidth: 1
              }
            }
          }
        }}
        enableGridX={false}
        enableGridY={false}
        label={false}
        animate={true}
        motionStiffness={90}
        motionDamping={15}
        isInteractive
        // handling mouse-over effect: borderRadius
        onMouseEnter={(d, e) => {
          e.target.classList.remove("smooth");
          e.target.classList.add("sharp");
        }}
        onMouseLeave={(d, e) => {
          e.target.classList.remove("sharp");
          e.target.classList.add("smooth");
        }}
      />
    );
  }
}

export default NivoBarChart;

Expected behavior The biggest number is 190, but y-axis only goes up to 180. It should include 200 as well.

Screenshots

Desktop (please complete the following information):

• OS: Win 10
• Browser Opera
• Version 62
• Nivo Bar 0.59.2

[Ollymid]

This issue is still an issue - I used CaptainT33mo’s solution to as a way to circumvent the problem in my project, but it’d be nice to not have to manually round up the highest value for the graph to fit the data properly

[dooleyb1]

I also have this exact same issue, i want auto to result in a bit of headroom in the graph, such that the line doesn’t look cut off when it touches the “max”:

You can see the line thickness is smaller when it touches the “max” because it’s being cut off. Why wouldn’t auto give a tiny bit of headroom so we don’t have this cut-off look to it?

I will go with the solutions proposed above, but it really should be incorporated into nivo directly.

+1 on this implementation, I think this would be the cleanest solution