CODEWITHSUNDEEP
javascriptchart.jschart.js2
Zapalka
Zapalka

Reputation: 75

chart.js 2.0 add new property to dataset

i need to add one property to dataset/label to identify it on click. I've tried something like this: 

Chart.controllers.customBar = Chart.controllers.bar.extend({
        code: null
    });

and it almost works, because i can see new property "code", data is associated with it, chart background is visible but empty, i mean no data from datasets visible.

This is my initialization:

var ctx = document.getElementById("roads-chart").getContext("2d");
    window.roadsBar = new Chart(ctx, {
        type: 'bar',
        data: roadsChartData,
        options: {
            title: {
                display: true,
                text: "Stan dróg"
            },
            tooltips: {
                mode: 'label'
            },
            responsive: true,
            scales: {
                xAxes: [{
                        stacked: true,
                    }],
                yAxes: [{
                        stacked: true
                    }]
            },
            onClick: function(e, d) {
                console.log(d);
            }
        }
    });

The thing is, i don't feel Chart.js, can someone help me handle it and show an example how does extending work? :)

Thanks

Upvotes: 2

Views: 2094

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

While you could extend the chart to do this, if you don't mind relying on internal properties (that could possibly change in later versions of chart.js), you can just use the _datasetIndex and _index properties to retrieve your extra properties from the chart configuration, like so

  options: {
    onClick: function(e, d) {
      if (d.length > 0) {
        console.log(this.config.data.datasets[d[0]._datasetIndex].code[d[0]._index]);
      }
    }
    ...

and 

  ...
  datasets: [{
    code: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    ...

Fiddle - http://jsfiddle.net/55cdvb20/

Upvotes: 3

Related Questions