Giter VIP home page Giter VIP logo

Comments (2)

yassilah avatar yassilah commented on July 23, 2024

From what I can see you made a mistake, you should be setting options.plugins.tooltips.callbacks.label and not options.tooltips.callbacks.label as described here. Please let me know if that works.

from chart-js-fabric.

BlowofDeath avatar BlowofDeath commented on July 23, 2024

That doesn't help, chart-js-fabric use "dependencies": {"chart.js": "^2.9.3",}
2.9.3 documentation tells you to use options.tooltips.callbacks.label, but i tried to use options.plugins.tooltips.callbacks.label and i'm got same error. I also tried to use onClick

 chart.set({
    chart: {
      options: {
        onClick: () => {
          console.log('click');
        },
      },
    },
  });

it doesn't work as well.

It works, only when i set this functions using fabric.util.chart.setDefaults, but i need this to be set only on specyfic chart.

  fabric.util.chart.setDefaults({
    options: {
      tooltips: {
        callbacks: {
          label: function (tooltipItem, data) {
            let total = 0;
            data.datasets[tooltipItem.datasetIndex].data.forEach((item) => {
              total += Number(item);
            });

            const label = data.datasets[tooltipItem.datasetIndex].label;
            return `${label}: ${tooltipItem.yLabel} of ${total}`;
          },
        },
      },
      onClick(e, elements) {
        const pointedElement = this.getElementAtEvent(e)[0];
        pointedElement &&
          chart.canvas.fire('openChartViewModal', {
            options: options.chart,
            pointedElement: {
              datasetIndex: pointedElement._datasetIndex,
              index: pointedElement._index,
            },
            datasourceInfo: options.datasourceInfo,
          });
      },
    },
  });



from chart-js-fabric.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.