The option to delete the axis

[jsong0605]

The option to delete the axis

[netil]

well, I think this issue isn't really attached on chart functionality.
To make as you want, there're a lot of approaches to make it.

Just one of the way will be defining viewBox attribute to the svg element to crop the viewport.
I'm not give example with your code for the complexity.

bb.generate({
  data: {
    columns: [
      ["data1", 5, 10, 15],
      ["data2", 20, 3, 8]
    ],
    type: "bar"
  },
  axis: {
    x: {
      show: false
    },
    y: {
      show: false
    }
  },
  legend: {
    show: false
  }
});

// to get the chart area size
var rect = d3.select(".bb-zoom-rect");

// set viewBox attribute
d3.select("#chart svg").attr("viewBox", [
    0,0,rect.attr("width"), rect.attr("height")
  ].join(" "))

This example will make chart element to fit on exact svg viewport.

• http://jsbin.com/dilukat/edit?js,output

[netil]

Good point!
Even though you set not showing, the corresponding node for axis still remains.

If you need to get rid axis nodes, just simply remove nodes

// in case of x axis
d3.selectAll(".bb-axis.bb-axis-x").remove();

// in case of y axis
d3.selectAll(".bb-axis.bb-axis-y").remove();

I'll take considering this issue if can be more nice way to implement. Thanks anyway.

[jsong0605]

Thanks for your answer.

Obviously, the axis does hide when I remove the axis as like your answer.

The thing is ... The white space still remains.
I couldn't manage to draw a chart without these white space.

I'd like to place the chart right above the bottom line, like below.

Could you give me a tip for a solution, please ?

[jsong0605]

Thank you for giving me a solution. It's been very helpful.