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..

    php css how to change name color based on membership?

    How to manage text breaks in span using js, css or anything else

    How to style textbox using CSS in ASP.NET

    How to apply this sidebar to all pages using CSS?

    How to write css for specific div selection like before after

    how to wrap form elements within the div tag(with background-color) using twitter bootstrap and CSS

    How to define exceptions for the Third occurence of a DIV?

    Firebug shows 404 error for claro_rtl.css, but I can't find the source that is trying to reference that file

    Modal box doesn't show completely

    How to make a rollover div clickable?

    How to move a carousel item to the middle when it's clicked in jquery

    How to get less to output a css variable with quotes

    How do I conclude the right directory path when including in CSS/JS/HTML?

    How do I make a html page printable without reloading/refreshing the data?

    How to detect clicks outside of a css modal? [duplicate]

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    How to remove the effect of all the parent containers on any child control

    How to toggle css media queries on and off

    Issue with changing how containers look based on values in an MD array

    CSS Have a div which can fit 5 li per row how to make 6 go to new line

    How to handle javascript & css files across a site?

    How to change css for an element but keep defaults for it's children

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How to only make a css element appear on one page?

    How to center float list elements inside an unordered list

    In how many ways and places we can place comment in CSS?

    How to brighten Textbox when it is focused?

    How do I add a Css file to my Class library?

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]

    How to change the active color of the tabs title background using css