CoreUI Chart type Bar- clickable bars to link to another page

by

0👍

✅

You can use the onClick function for this:

var options = {
  type: 'bar',
  data: {
    labels: ["December 2020", "Januarie 2021", "Feb 2021", "March 2021", "April 2021", "May 2021"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 3, 3],
      backgroundColor: 'pink'
    }]
  },
  options: {
    onClick: (evt, activeEls) => {
      console.log(activeEls[0]._model.label)
      console.log(activeEls[0]._model.label.split(" ")[0])
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
<div className = "chart-container" >
  <CChartBar
datasets = {
  [{
      label: "Expected Expirations",
      type: "bar",
      data: expectedExpirations,
      backgroundColor: "#949fe8",
      borderColor: "blue",
      fill: true,
      order: 2,
    },
    {
      label: 'Actual Expirations',
      type: "bar",
      data: actualExpirations,
      backgroundColor: '#556ad1',
      borderColor: "blue",
      fill: true,
      order: 1,
    },
    {
      label: 'Target Expirations',
      backgroundColor: '#352c2c',
      data: targetExpirations,
      type: "line",
      borderColor: "black",
      fill: true,
      order: 0,
      borderWidth: 2,
      fill: "#352c2c",
      pointBackgroundColor: "#352c2c",
      lineTension: 0,
    }
  ]
}
labels = {
  dateLabels
}
onClick = {
  (event) => drillDown(event)
}
options = {
  {
    onClick: (evt, activeEls) => {
      console.log(activeEls[0]._model.label)
      console.log(activeEls[0]._model.label.split(" ")[0])
    },
    maintainAspectRatio: false,
    responsive: true,
    tooltips: {
      enabled: true,
    },
    scales: {
      xAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: "Month"
        }
      }],
      yAxes: [{
        ticks: {
          stacked: true,
          beginAtZero: true,
          stepValue: 10,
          max: maxOfAllExpirations
        },
        scaleLabel: {
          display: true,
          labelString: "Number of Lease Expirations"
        }
      }]
    },
  }
}
/>
``

Leave a comment