How do I put a box around my Flot graph?

Question

I’ve created a graph with Flot (using JQuery 1.11). I would like to have a dark box around my graph with the grid being lighter in the background, similar to the main Flot example — http://www.flotcharts.org/flot/examples/basic-usage/index.html . So I have this HTML on which the FLot wraps itself …

<div class="demo-container">
    <div id="placeholder" class="demo-placeholder" style="width:800px; height:500px;"></div>
</div>

and then I add this CSS

.demo-container {
  padding: 10px;
  background-color: orange;
  border: 1px solid #000000;
  box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

But this puts a box around my main container and not the graph. How do I get a box around the graph? My attempted stab at this is in this Fiddle — http://jsfiddle.net/y16h8LmL/5/ . Thanks, - Dave

Answer 1

You need to change the value of borderWidth

grid: {
  margin: 10,
  labelMargin: 5,
  labelWidth: 20,
  hoverable: true,
  clickable: true,
  tickColor: "#efefef",
  borderWidth: 0, // Here for the width
  borderColor: "#efefef" // Here for the color
},

Here is your fiddle updated :)