Search code examples
javascriptjquerycsschart.js

Chart.js remove border from x/y Axis

I'm using Chart.js for one of my projects. In which I want to remove border from x/y axis. Any help would be really helpful. Refer Attached Image enter image description here Please not that I'm not referring to the GridLines(Which I already turned off using scaleShowGridLines : false)

Chart Script

var topVideos = {
    labels : ["","","","",""],
    datasets : [
      {
        fillColor : "rgba(2,137,203,1)",
        strokeColor : "rgba(220,220,220,0)",
        highlightFill: "rgba(2,137,203,0.8)",
        highlightStroke: "rgba(220,220,220,0)",
        data : [90000, 200000, 70000, 100000, 180000 ]
      }
    ]

}
window.onload = function(){
    var ctx = $("#topvideos").get(0).getContext("2d");
    window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
      responsive : true,
      barShowStroke: false,
      scaleShowGridLines : false,
      barValueSpacing : 7,
      barDatasetSpacing : 30,
    });
}

Thanks in Advance.

Solution

  • I think you are using a fork of Chart.js and not the actual chart.js (since the current stable version doesn't have horizontal bars)

    In Chart.js, you can set the scale line color to a transparent value, like so

    window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
     scaleLineColor: "rgba(0,0,0,0)",
     ...

    If the fork is from a version after this, the same options should work in your forked library as well.