javascript - JQuery flot remove bar border - Stack Overflow

admin管理员组

文章数量:1325236

Here's my jsFiddle

How can I remove the border or to be the same as the bar (not darker) ?

EDIT: Actually, I need to remove the border pletely. Is this possible?

    var chartOptions = {
            xaxis: { ticks: chartTicks },
            grid: { clickable: true, hoverable: true },
    series: { stack: true, bars: { fill: '#000', show: true, align:'center', barWidth: 0.5 } }
        };

Here's my jsFiddle

How can I remove the border or to be the same as the bar (not darker) ?

EDIT: Actually, I need to remove the border pletely. Is this possible?

    var chartOptions = {
            xaxis: { ticks: chartTicks },
            grid: { clickable: true, hoverable: true },
    series: { stack: true, bars: { fill: '#000', show: true, align:'center', barWidth: 0.5 } }
        };

• javascript
• jquery
• flot

Share Improve this question Follow edited May 15, 2015 at 9:18 alex asked May 15, 2015 at 9:11 alexalex 1,35022 gold badges3131 silver badges6969 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can use the lineWidth option to remove the outline / border of the bars and / or the fillColor option to change the filling (this can also be used for gradients):

    series: {
        stack: true,
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.5,
            lineWidth: 0,
            fillColor: {
                colors: [{
                    opacity: 1.0
                }, {
                    opacity: 1.0
                }]
            }
        }
    }

See this fiddle for an example.

To remove the border from the bars in the graph, you can add lineWidth: 0 to the bars object in your options.

series: {
    stack: true,
    bars: {
        lineWidth: 0,
        show: true,
        align: 'center',
        barWidth: 0.5
    }
}

Here it is in action.

This could be found in the API docs here, by the way.

I am not 100% sure if you want to remove borders around the graph or the bars. The jsFiddle here has done both and the code is explained below.

---

To remove the border around the bars. Supply lineWidth to the bars as in the example below.

var chartOptions = {
    xaxis: {
        ticks: chartTicks
    },
    grid: {
        clickable: true,
        hoverable: true
    },
    series: {
        stack: true,
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.5,
            lineWidth: 0
        }
    }
};

---

To remove the border from around the graph. Supply borderWidth to the grid you can set borderWidth: 0 or you can specify each width like in the example below.

var chartOptions = {
    xaxis: {
        ticks: chartTicks
    },
    grid: {
        clickable: true,
        hoverable: true,
        borderWidth: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        }
    },
    series: {
        stack: true,
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.5
        }
    }
};

本文标签： javascriptJQuery flot remove bar borderStack Overflow