CODEWITHSUNDEEP
javascriptjquerycsschartsflot
alex
alex

Reputation: 1350

jQuery Flot Charts: Remove Labels Below Bars

Here's the JSFiddle

I need to remove the labels below the bars, thus removing the gap (blank space) between the chart and end of container. The labels are dynamic, so the blank space can bigger or smaller in height.

display:none on the .xAxis .tickLabel doesn't seem to fix this. This issue appears after updating to last version of the jquery flot library.

Current and wrong:

enter image description here

Desired and correct:

enter image description here

Upvotes: 1

Views: 1169

Answers (2)

Raidri
Raidri

Reputation: 17550

If you don't want tick labels on your x axis and no vertical grid lines, you can set the ticks property to an empty array:

    xaxis: {
        tickColor: "FFFFFF",
        ticks: []
    },

See this fiddle.

If you want to keep the vertical grid lines, you can use an array with empty strings for the tick labels:

    xaxis: {
        tickColor: "FFFFFF",
        ticks: [
            [1, ""],
            [2, ""],
            [3, ""],
            [4, ""],
            [5, ""]
        ]
    }

See this fiddle.

If you need the labels for other functionality in your chart, save the array in a variable and use it from there.

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

Try this http://jsfiddle.net/L0r76411/3/

Add this to your CSS

#example-section15 {
  height: 230px;
}

Upvotes: 0

Related Questions