Using D3.tip

ignore the rest...there are bugs. see Lars comment at http://stackoverflow.com/questions/21273542/d3-chart-legend-bars-not-appearing

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js"></script>
<input id="clickMe1" type="button" value="Create Chart" onclick='createMainPerfChart()' />
<input id="clickMe2" type="button" value="Update Chart" onclick='updateMainPerfChart()' />
<div id="msg"></div>
<div style="margin-top:120px;">
    <svg id="mainchart"></svg>
</div>

CSS

.d3-tip {
    line-height: 1;
    padding: 12px;
    /*    background: rgba(100, 100, 100, 0.8);  */
    background: rgba(248, 182, 36, 0.8);
    color: #FFFFCC;
    border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    /*    color: rgba(100, 100, 100, 0.8);  */
    color: rgba(248, 182, 36, 0.8);
    content:"\25BC";
    position: absolute;
    text-align: center;
}
/* Style northward tooltips differently */
 .d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
}
.BAR-text {
    color: steelblue;
    float: right;
}
.CAB-text {
    color: red;
    float: right;
}
.TGT-text {
    color: green;
    float: right;
}
.tip-header {
    color: #54770f;
    float: left;
}
.bar {
    fill: steelblue;
}
.bar:hover {
    fill: brown;
}
.CABLine {
    stroke: red;
    stroke-width: 2;
    fill: none;
}
.TGTLine {
    stroke: #2BBD2B;
    stroke-width: 2;
    fill: none;
}
/*
.CABLine:hover {
    stroke: brown;
}
.TGTLine:hover {
    stroke: brown;
} 
*/
 .axis {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
}
.label {
    font-size: 50%;
}
.legend rect {
    fill: white;
    stroke: black;
    opacity: 0.8;
}

JavaScript

divid = "#mainchart";

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
    return "<strong class='tip-header'>Energy at Interval:&nbsp;&nbsp;&nbsp;</strong><span class='BAR-text'>" + d.BarValue + "KWh</span><br /><strong class='tip-header'>Total Energy:</strong><span class='CAB-text'>" + d.LineValue + "KW</span><br /><strong class='tip-header'>Target Energy:</strong><span class='TGT-text'>" + d.TargetValue + "KW</span>";
});

// Create the charts	
function createMainPerfChart() {

    var cumulative_actual = 0;
    var cumulative_target = 0;

    var margin = {
        top: 20,
        right: 60,
        bottom: 60,
        left: 60
    },
    width = 940 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    //	d3.json(url, function (error, data) {
    var data = getData();
    data.forEach(function (d) {
        d.BarValue = +d.BarValue;
        d.TargetValue = +d.TargetValue;

        cumulative_actual = cumulative_actual + d.BarValue;
        d.LineValue = cumulative_actual;

        cumulative_target = cumulative_target + d.TargetValue;
        d.TargetValue = cumulative_target;
    });

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], 0.05);

    var yL = d3.scale.linear()
        .range([height, 0]);

    var yR = d3.scale.linear()
        .range([height, 0]);

    var yAxisL = d3.svg.axis()
        .scale(yL)
        .orient("left")
        .ticks(10)
        .tickFormat(function (d) {
        if ((d / 1000) >= 1) {
            d = (d / 1000) + "K";
        };
        return d;
    });

    var yAxisR = d3.svg.axis()
        .scale(yR)
        .orient("right")
        .ticks(10)
        .tickFormat(function (d) {
        if ((d / 1000) >= 1) {
            d = (d / 1000) + "K";
        };
        return d;
    });

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function (d) {
        return d;
    });

    var svg...