ChartJS - Mixed chart

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

var opc = $("#chart");
var myChart = new Chart(opc, {
  type: 'bar',
  data: {
    labels: ['Item 1', 'Item 2', 'Item 3'],
    datasets: [{
      type: 'line',
      label: 'Line Component',
      data: [25, 5, 20],
      fill: false
    }, {
      type: 'bar',
      label: 'Bar Component',
      data: [10, 20, 30]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          suggestedMin: 0, // minimum will be 0, unless there is a lower value.
          // OR //
          beginAtZero: true // minimum value will be 0.
        }
      }]
    }
  }
});

opc.click(function(evt) {
  var activePoints = myChart.getElementAtEvent(evt);
  if (activePoints[0]) {
    var chartData = activePoints[0]['_chart'].config.data;
    var datasetIdx = activePoints[0]['_datasetIndex'];
    var idx = activePoints[0]['_index'];

    var label = chartData.labels[idx];
    var value = chartData.datasets[datasetIdx].data[idx];

    var url = "label=" + label + "&value=" + value;
    console.log(url);
    alert(url);
  }
});