chart.js

Stacked Bar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id='legendTime'></div>
<div id='divTimeline'>
    <canvas id="canvasTime" width="500" height="150"></canvas>
</div>
<button id='btnChange'>change</button>

JavaScript

function createTimeLine(data, init) {
    var canvas = document.getElementById("canvasTime");
    var ctx = canvas.getContext("2d");
    var chart = new Chart(ctx);
    var myBarChart;
    myBarChart = chart.Bar(data, {
        barValueSpacing: 50,
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"display: inline-block;width: 10px;background-color:<%=datasets[i].fillColor%>\">&nbsp;</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
    });
    //myBarChart.destroy();
    if (init) {
        var legendHolder = document.createElement('div');
        legendHolder.innerHTML = myBarChart.generateLegend();
        document.getElementById('legendTime').appendChild(legendHolder.firstChild);
        document.getElementById("canvasTime").addEventListener("click", function (evt) {
            clickChart(evt);
        });
    }

    function clickChart(evt) {
        var activePoints = myBarChart.getBarsAtEvent(evt);
        console.log(activePoints);
        console.log(myBarChart);
    }
}