Flotcharts: How to place the legend on the right of the chart


Tags: jquery,css,charts,flot

Problem :

So I have this chart that I generated with flotcharts library:

enter image description here

And the HTML is:

<div class="demo-container">
    <div id="legend-container"></div>
    <div id="placeholder" class="demo-placeholder"></div>
</div>

Now, I want to put the legend outside of the chart. So I start using this in my plot options:

var options = {
    ...,
    legend:{         
        container:$("#legend-container"),
    }
    ...
}

And the CSS:

#legend-container {
    background-color: #fff;
    padding: 2px;
    margin-bottom: 8px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E6E6E6;
    display: inline-block;
    margin: 0 auto;
}

The result is:

enter image description here

That's great! But now I want to place the legend, not on top of (or on the bottom of) the chart, but on the right, on that blank & white space that there is next to the chart.

How to do it?

For completeness, the rest of my CSS is:

.demo-container {
    box-sizing: border-box;
    width: 750px;
    height: 300px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    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);
}

.demo-placeholder {
    width: 80%;
    height: 80%;
    font-size: 14px;
    line-height: 1.2em;
}


Solution :

Switch the order of your divs and then float them left:

<div class="demo-container">        
    <div id="placeholder" class="demo-placeholder"></div>
    <div id="legend-container"></div>
</div>

CSS:

.demo-placeholder {
    width: 80%;
    height: 80%;
    font-size: 14px;
    line-height: 1.2em;
    float: left; /*<-- ADD THIS*/
}

Example here.


    CSS Howto..

    How to customize and change ready-made CSS libraries such as Twitter Bootstrap, and what other alternatives exist? [closed]

    How to document a webpage HTML and CSS using comments [closed]

    How do I get an infinite vertically scrolling image in CSS?

    How can I vertically align text within a span element, or make the span the same size as the text?

    How to add a line break
    in
    in HTML

    How to slowly move header while user scrolls the page?

    How do i cover the image on navbar as well?

    How to fade-in and fade-out background-image with CSS transition?

    Navbar on left of page, how to let content resize to match screen size?

    How to align image with hr line with another image html CSS?

    how to make an interactive uploader like gmail and facebook have?

    How to set CSS3 ::selection using Javascript

    How to Add Class to Bootstrap Thumbnails on Slider Change

    How does positioning work in HTML/CSS?

    how to alter a css class directly?

    how to avoid extra blank page at end while printing?

    How to use scrollRevealJS alongside AnimateCSS?

    how to center a div without width?

    How to not use absolute positioning CSS

    Showing different in Internet Explorer and Google Chrome

    how to add space at top of page

    How to make a GWT-like CaptionPanel manually

    How to make sure one css file does not override another one?

    How to apply a property only to the submit button

    How to change the style/css of a tooltip?

    How to center align ion icon inside button?

    How to target last row in a list with CSS?

    How to have a textbox with label inside it support 'tap to paste' feature in iPad?

    How can I apply CSS to elements created with javascript in IE?

    How do you implement CSS without to have clear:both on float left and float right