Chart.js

<!DOCTYPE html>
<html>

<head>

  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body class="container">
  <div>
    <div class="row">
      <div class="col-md-12">
        <h3>2015 Revenue by Segment</h3>
        <h3>(in US$ Millions)<sub class="sup">1</sub></h3>
        <canvas id="barGraph"></canvas>
      </div>
    </div>
  </div>


<hr>
  <div class="row">
    <div class="col-md-6">
      <h3>2015 sales</h3>
      <canvas id="doughnutGraph"></canvas>
    </div>


    <div class="col-md-6">
      <h3>2015 bookings</h3>
      <canvas id="doughnutGraph2"></canvas>
    </div>
  </div>
<hr>
  <div class="row">
    <div class="col-md-9">
      <canvas id="lineGraph"></canvas>
    </div>
    <div class="col-md-3">
      <div id="js-legend" class="chart-legend"></div>
      <h3></h3>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="script.js"></script>
  <script></script>
</body>

</html>

// Notice now we're extending the particular Line chart type, rather than the base class.
Chart.types.Bar.extend({
  // Passing in a name registers this chart in the Chart namespace in the same way
  name: "BarAlt",
  draw: function(ease) {
    var helpers = Chart.helpers;
    var easingDecimal = ease || 1;
    this.clear();
    var ctx = this.chart.ctx;
    var width = this.chart.width;
    this.scale.draw(easingDecimal);

    helpers.each(this.datasets, function(dataset, datasetIndex) {
      helpers.each(dataset.bars, function(bar, index) {
        if (bar.hasValue()) {
          bar.base = this.scale.endPoint;
          //transition then draw
          bar.transition({
            x: this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
            y: this.scale.calculateY(bar.value),
            width: this.scale.calculateBarWidth(this.datasets.length),
          }, easingDecimal).draw();
        }

        var scaleSource = width,
          scaleFactor = 0.12,
          maxScale = 500,
          minScale = 30; //Tweak these values to taste

        var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
        if (fontSize > maxScale) fontSize = maxScale;
        if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums


        ctx.font = fontSize + '% "Arial';
        ctx.fillStyle = "#ffffff";
        ctx.textAlign = "center";
        ctx.fillText(numberWithCommas(bar.value), this.scale.calculateBarX(this.datasets.length, datasetIndex, index), (this.scale.calculateY(bar.value)) + 25);


        ctx.fillStyle = "#0039A6";
        ctx.fillText(bar.datasetLabel, this.scale.calculateBarX(this.datasets.length, datasetIndex, index), (this.scale.calculateY(bar.value)) - 5);

      }, this)
    }, this)
  }
});


var ctx = document.getElementById('barGraph').getContext('2d');

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var barData = {
  labels: [],
  datasets: [{
      label: "Electronics & Safety",
      fillColor: "#747678",
      strokeColor: "#747678",
      highlightFill: "#747678",
      highlightStroke: "#747678",
      data: [2774]
    }, {
      label: "Powertrain Systems",
      fillColor: "#0088C4",
      strokeColor: "#0088C4",
      highlightFill: "#0088C4",
      highlightStroke: "#0088C4",
      data: [4377]
    },

    {
      label: "Electrical / Electronic Architecture",
      fillColor: "#0039A6",
      strokeColor: "#0039A6",
      highlightFill: "#0039A6",
      highlightStroke: "#0039A6",
      data: [8180]
    }
  ]
};

var barGraph = new Chart(ctx).BarAlt(barData, {
  responsive: true,
  scaleShowGridLines: false,
  showScale: false,
  animationEasing: "easeOutQuart",
  showTooltips: false
});



var ctx = document.getElementById('doughnutGraph').getContext('2d');

var salesDoughnut = [{
  value: 25,
  color: "#747678",
  highlight: "#747678",
  label: "Asia Pacific"
}, {
  value: 35,
  color: "#009FDA",
  highlight: "#009FDA",
  label: "EMEA"
}, {
  value: 40,
  color: "#0039A6",
  highlight: "#0039A6",
  label: "Americas"
}];

var myDoughnutChart = new Chart(ctx).Doughnut(salesDoughnut, {
  responsive: true,
  tooltipTemplate: "<%= value %>% <%= label %>",
  tooltipFillColor: "rgba(0,0,0,0.8)",
  tooltipFontFamily: "'Arial'",
  onAnimationComplete: function() {
    this.showTooltip(this.segments, true);

    //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
    //this.showTooltip(this.datasets[0].bars, true);

    //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
    //this.showTooltip(this.datasets[0].points, true);  
  },
  tooltipEvents: [],
  showTooltips: true
});

var ctx = document.getElementById('doughnutGraph2').getContext('2d');

var bookingsDoughnut = [{
  value: 31,
  color: "#747678",
  highlight: "#747678",
  label: "Asia Pacific"
}, {
  value: 33,
  color: "#009FDA",
  highlight: "#009FDA",
  label: "EMEA"
}, {
  value: 36,
  color: "#0039A6",
  highlight: "#0039A6",
  label: "Americas"
}];

var myDoughnutChart = new Chart(ctx).Doughnut(bookingsDoughnut, {
  responsive: true,
  tooltipTemplate: "<%= value %>% <%= label %>",
  tooltipFillColor: "rgba(0,0,0,0.8)",
  tooltipFontFamily: "'Arial'",
  onAnimationComplete: function() {
    this.showTooltip(this.segments, true);

    //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
    //this.showTooltip(this.datasets[0].bars, true);

    //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
    //this.showTooltip(this.datasets[0].points, true);  
  },
  tooltipEvents: [],
  showTooltips: true
});


var ctx = document.getElementById('lineGraph').getContext('2d');

var lineData = {
  labels: ["11/27 2011", "12/31 2011", "12/31 2012", "12/3 2013", "12/31 2014", "12/31 2015"],
  datasets: [{
    label: "Delphi Automotive PLC",
    fillColor: "rgba(0,0,0,0)",
    strokeColor: "#1B3F86",
    pointColor: "#1B3F86",
    pointStrokeColor: "#1B3F86",
    pointHighlightFill: "#1B3F86",
    pointHighlightStroke: "#1B3F86",
    data: [100, 100, 175, 290, 350, 420]
  },
  {
    label: "S&P 500",
    fillColor: "rgba(0,0,0,0)",
    strokeColor: "#108ACA",
    pointColor: "#108ACA",
    pointStrokeColor: "#108ACA",
    pointHighlightFill: "#108ACA",
    pointHighlightStroke: "#108ACA",
    data: [100, 100, 120, 150, 175, 175]
  },
  {
    label: "Automotive Supplier Peer Group",
    fillColor: "rgba(0,0,0,0)",
    strokeColor: "#878787",
    pointColor: "#878787",
    pointStrokeColor: "#878787",
    pointHighlightFill: "#878787",
    pointHighlightStroke: "#878787",
    data: [100, 80, 110, 160, 175, 170]
  },
  ]
}

var myLineChart = new Chart(ctx).Line(lineData, {
  responsive: true,
  scaleOverride: true,
  scaleSteps: 9,
  scaleStepWidth: 50,
  scaleStartValue: 50,
  showTooltips: false
});

document.getElementById('js-legend').innerHTML = myLineChart.generateLegend();

.sup {
  position: relative;
  bottom: 1ex; 
  font-size: 80%;
}

.chart-legend ul{
  list-style: none;
}

.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}