简体   繁体   中英

Remove top horizontal line in a horizontal bar chart (Chart.js 2)

I created a horizontal grouped bar chart in Chart.js but am getting stuck on a weird problem. The problem is that while I disabled all grid lines and borders the chart is still showing a top horizontal line which I would like to get rid off. It is visible in this screenshot: http://imgur.com/41YGxA8 . I also made a JSFiddle: https://jsfiddle.net/bsocw1v9/

function create_horizontal_bar_chart(){
/**
 * Draw the chart on the correct canvas. Add the correct data sets
 * and set the correct draw type.
 */
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d");
let data = {
labels: ['Diensten'],
datasets: [
    {
        type: 'horizontalBar',
        backgroundColor: "rgb(0,33,86)",
        data: [2250],
        stack: 1
    },
    {
        type: 'horizontalBar',
        backgroundColor: "rgb(219,219,219)",
        data: [3000],
        stack: 2
    },
    {
        type: 'horizontalBar',
        backgroundColor: "rgb(240,95,0)",
        data: [750],
        stack: 3
    },
]
};
new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    showScale: false,
    options: {
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        },
        hover: {
            mode: null
        },
        scales: {
            xAxes: [{
                stacked: true,
                display: false,
                gridLines: {
                    drawBorder: false,
                },
            }],
            yAxes: [{
                stacked: true,
                barPercentage: 0.9,
                gridLines: {
                    drawBorder: false,
                },
            }]
        }
    }
});

}

I hope someone could help me with this problem as I simply can't figure out whats causing this.

You have only disabled borders on the edge of the chart (by setting drawBorder to false ), not grid lines. The line that bugs you is a grid line. To disable grid lines for an axis use:

gridLines: {
    display: false
}

Look at the docs under "Grid Line Configuration".

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM