CODEWITHSUNDEEP
javascriptangularjschartsfrontend
Gashio Lee
Gashio Lee

Reputation: 129

Is it possible to call a directive in Chart.Js?

In angular JS and chart.js, its possible to display a tooltip on hover, and even call functions when you click a bar (Assuming that your using a bar graph from chart.js).

However, is it possible to call a directive when you click on a bar graph? Or should I use canvas.js for this?

The directive I'm refering to is custom and it pops-up as a window containing some values. It doesn't have to be a directive, it can even be an angular component you call after clicking a bar in the chart.

Upvotes: 3

Views: 440

Answers (3)

Gashio Lee
Gashio Lee

Reputation: 129

From what I've looked into and made, it seems that this scenario was impossible. There are three type of directives, namely structural, component and property directive.

What I wanted was a property directive, but a property directive doesn't really have html code inside and it simply modifies/adds a behaviour to the DOM.

The best way to do what I wanted was to create a component and get the event thrown by the click function by adding the code (clickChart) = "chartClick($event)" to the Canvas

<canvas myChart [datasets]="myDataSetVar" (chartClick)="chartClick($event)">

By calling the chartClick function and passing the event. If you console.log the event, you can see the color, data, and alot of things from the chart just from this event. You can even tell if a dataset was clicked.

With this, instead of using a directive I used an ngIf that checks for a certain property that becomes true when a dataset from the chart is clicked. I then display the DOM element when the propert is true.

So the short answer to my question is: No, you cannot use a property directive to do what I wanted.

Upvotes: 2

Anas M.I
Anas M.I

Reputation: 582

This might help you. Here is a working example

[http://jsfiddle.net/80k0ojyh/]

let chart = Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

chart.update({
  plotOptions: {
    series: {
      events: {
        click: (event) => {
          alert('you clicked something');
        },
      },
    },
  }
});

Upvotes: 0

Rajesh kumar R
Rajesh kumar R

Reputation: 214

I managed to find the answer to my question by looking through the Chart.js source code.

Provided at line 3727 of Chart.js, Standard Build, is the method .getElementAtEvent. This method returns me the "chart element" that was clicked on. There is sufficent data here to determine what data to show in a drill-down view of the dataset clicked on.

On the first index of the array returned by chart.getElementAtEvent is a value _datasetIndex. This value shows the index of the dataset that was clicked on.

The specific bar that was clicked on, I believe, is noted by the value _index. In my example in my question, _index would point to One in chart_config.data.labels.

My handleClick function now looks like this:

function handleClick(evt)
{
    var activeElement = chart.getElementAtEvent(evt);

..where chart is the reference of the chart created by chart.js when doing:

chart = new Chart(canv, chart_config);

The specific set of data that was selected by the click can therefore be found as:

chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];

And there you have it. I now have a datapoint that I can build a query from to display the data of the bar that was clicked on.

Upvotes: 4

Related Questions