remove the X axis on a bar chart

Question

So I am trying to make a Bar Chart with only the labels and no physical line for the X axis. I already managed to remove the y axis by making the left margin -1, but I want to keep the labels that are generated for the X axis.

I have already managed to do this by inspecting my web page and finding the x axis object and changing it from <path class="domain" d="M1,6V0H391.5V6" style="domain.height: 0;"></path> to <path class="domain" d="M,6V0H391.5V6" style="domain.height: 0;"></path> , which removes the line.

How would I do this using CSS, HTML, or JS?

Answer 1

If jquery is allowed, and if only the <path> elements have the class domain :

$(document).ready(function () {
    $('.domain').css("display","none");
});

If other elements are part of the domain class, you can single out the <path> elements in domain by doing this:

$(document).ready(function () {
    $('path.domain').css("display","none");
});

This effectively disables the display of the y-axis and x-axis, so no need to set the left margin negative.

Answer 2

In CSS, you can simply add:

.domain{
    display: none;
}

Put the above rule in an external CSS document and add a tag to the head of the HTML document.

If you don't know how to do that, check out this link: http://www.w3schools.com/tags/tag_link.asp

This is the simplest solution, if for some reason you need JavaScript, here is the solution in pure JavaScript.

First, add this rule to the external CSS file from above:

.display-none{
    display: none;
}

Then, in your JS file, add this:

var domainPaths = document.querySelectorAll("path.domain");

for(var i=0;i<domainPaths.length;i++){
    domainPaths[i].classList.add("display-none");
}

This will hide both the x and y axes.

It may seem complicated now, but learning pure JS will serve you well in the future.