Flot enables us customise grid borders. This is documented here with the following:

grid: {
    borderWidth: number or object with "top", "right", "bottom" and "left" properties with different widths
    borderColor: color or null or object with "top", "right", "bottom" and "left" properties with different colors
}

However, I couldn't manage to e up with a successfully working example. To create a custom grid with top and left border with white color I tried the following, but it didn't work:

grid: {
    borderWidth: {top: 1, right: 0, bottom: 0, left: 1},
    borderColor: {top: "#FFF", left: "#FFF"}
}

Can anyone provide a working example?

Flot enables us customise grid borders. This is documented here with the following:

grid: {
    borderWidth: number or object with "top", "right", "bottom" and "left" properties with different widths
    borderColor: color or null or object with "top", "right", "bottom" and "left" properties with different colors
}

However, I couldn't manage to e up with a successfully working example. To create a custom grid with top and left border with white color I tried the following, but it didn't work:

grid: {
    borderWidth: {top: 1, right: 0, bottom: 0, left: 1},
    borderColor: {top: "#FFF", left: "#FFF"}
}

Can anyone provide a working example?

• javascript
• flot

1 Answer 1

Which version of flot are you using? The borderWidth property did not acmodate an object as the value until version 0.8. Make sure you are using the latest version (0.8.1) and give it another shot. The only other thing I notice is the missing ma after the borderWidth values. Should be "left: 1 }, borderColor..."