The option to delete the axis

[jsong0605]

Description

I’m trying to render a chart w/o y and x axis.

The chart supposed to be rendered on the very lower side without any space, as I expected.

But the axis still does exist, even after adding the ‘axis.x.show = false’ & ‘axis.y.show = false’.

The axis’s visibility is set hidden, meaning still occupying the space.

So the solution what I am having is like below.

1. Draw the chart bigger than I meant to
2. Cut off the x and y axis on purpose

When I render a chart w/o the axis, I repeatedly do this and feel knackered.

I am hoping you to have a plan regarding the bothering works I mentioned above.

Thanks :)

Steps to check or reproduce

var oRes = {
    date: [
        '2016-10-15',
        '2016-11-01',
        '2016-12-01',
        '2017-01-01',
        '2017-02-01',
        '2017-03-01',
        '2017-04-01',
        '2017-05-01',
        '2017-06-01',
        '2017-07-01',
        '2017-08-01',
        '2017-09-01',
        '2017-10-01',
    ],
    data: [null, 42, 47, 37, 44, 40,
        33, 35, 32, 41, 46,
        50, 51]
};
this._aDate = (["date"]).concat(oRes.date);
this._aData = (["precipitation"]).concat(oRes.data);

var chart = Billboard.generate({
    bindto: "#_precipitation",
    interaction: {
        enabled: false
    },
    legend: {
        show: false
    },
    tooltip: {
        show: false
    },
    data: {
        x: "date",
        types:    {
            precipitation : "bar"
        },
        columns: [ this._aDate, this._aData],
        labels: true
    },
    padding: {
        right:  -10
    },
    bar: {
        width: 5,
        zerobased: true
    },
    point: {
        show: false
    },
    axis: {
        x: {
            // fit:  true,
            min:  "2016-10-15",
            max:  "2017-10-14",
            type: "timeseries",
            tick: {
                format: "%-m"
                /*culling: {
                    max: 12 // the number of tick texts will be adjusted to less than this value
                }*/
            },
            show: false,
            padding: {
                left: 0
            }
        },
        y: {
            show: false,
            padding: {
                bottom: 0
            }
        }
    },
    grid:    {
        x: {
            lines: [
                {value: "2016-11-01"},
                {value: "2016-12-01"},
                {value: "2017-01-01"},
                {value: "2017-02-01"},
                {value: "2017-03-01"},
                {value: "2017-04-01"},
                {value: "2017-05-01"},
                {value: "2017-06-01"},
                {value: "2017-07-01"},
                {value: "2017-08-01"},
                {value: "2017-09-01"},
                {value: "2017-10-01"},
                {value: "2017-06-19", class:"c3-dashed-line"}
            ]
        }
    }
});

[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 ?

[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

[jsong0605]

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