Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Y axis goes below 0 when min is set to 0 and dataset starts at 1 #114

Closed
shvelo opened this issue Feb 9, 2016 · 1 comment
Closed

Y axis goes below 0 when min is set to 0 and dataset starts at 1 #114

shvelo opened this issue Feb 9, 2016 · 1 comment

Comments

@shvelo
Copy link

shvelo commented Feb 9, 2016

screenshot_20160209_105918

Options:

{
  dimensions: {
    orders: {
      name: "Orders",
      type: 'line',
      label: true,
      axis: 'y'
    },
    income: {
      name: "Income",
      type: 'bar',
      label: true,
      axis: 'y2',
      postfix: ' GEL'
    },
    date: {
      name: "Date",
      axis: 'x',
      dataType: 'category'
    }
  },
  data: [{
    "date": new Date("2015-12-01T00:00:00.000Z"),
    "orders": 1,
    "income": 16
  }, {
    "date": new Date("2016-01-01T00:00:00.000Z"),
    "orders": 8,
    "income": 111
  }],
  chart: {
    size: {
      height: 500
    },
    data: {
      watchLimit: -1,
      labels: {
        // shows labels on data points
        format: function(v, id, i, j) {
          // ignore fields other than income
          if (id !== "income")
            return v;

          // hide income on hour view
          return tc.step !== "hour" ? v + " GEL" : undefined;
        }
      }
    },
    axis: {
      y: {
        label: "Orders",
        min: 0,
        padding: 0,
        tick: {
          format: d3.format('d')
        }
      },
      y2: {
        label: "Income"
      },
      x: {
        label: "Date",
        tick: {
          culling: {
            max: 25
          },
          width: '100%',
          rotate: 90,
          // formats data on X axis
          format: function(d) {
            var item = tc.options.data[d];
            switch (tc.step) {
              case "hour":
                return d3.time.format('%a %m/%d-%H:%M')(item.date);
              case "week":
                return d3.time.format('%Y <%W>-%b %a %m/%d')(item.date);
              case "month":
                console.log(item, d, tc.options.data);
                return d3.time.format('%Y %b')(item.date);
              case "day":
              default:
                return d3.time.format('%a %m/%d')(item.date);
            }
          }
        }
      }
    }
  }
}

JsFiddle

@maxklenk
Copy link
Member

maxklenk commented Feb 9, 2016

Hey @shvelo
the documentation of axis.y.min references the wrong usage of axis.y.padding. Please make sure you pass a object to padding:

y: {
  min: 0,
  padding: {
    bottom: 0
  }
}

http://c3js.org/reference.html#axis-y-padding

@maxklenk maxklenk closed this as completed Feb 9, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants