CODEWITHSUNDEEP
javascriptjqueryflot
alex
alex

Reputation: 1350

JQuery flot remove bar border

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

Upvotes: 3

Views: 3253

Answers (3)

Ashley Medway
Ashley Medway

Reputation: 7301

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

Upvotes: 0

Purag
Purag

Reputation: 17071

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.

Upvotes: 2

Raidri
Raidri

Reputation: 17560

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.

Upvotes: 7

Related Questions