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

3 Answers 3

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
        }
    }
};