How to integrate charts-plugin-datalabels to show percentage in Pie, Line and Bar chart #1712

11 Answer(s)

• 

  0

  piseth created 3 years ago

  Any update please?

  Save Cancel
• 

  0

  ismcagdas created 3 years ago

  Support Team

  Hi @piseth

  We will assist you via email.

  Save Cancel
• 

  0

  piseth created 3 years ago

  Hi @piseth

  We will assist you via email.

  Please kindly note that there is no issue with commercial framework. I just want to integrate charts-plugin-datalabels with chartjs (that is being used in HostDashboard.cshtml).

  I follow this instruction https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#integration But i don't know where to put the following information to make it work

  import {Chart} from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels';

  // Register the plugin to all charts: Chart.register(ChartDataLabels);

  // OR only to specific charts: var chart = new Chart(ctx, { plugins: [ChartDataLabels], options: { // ... } })

  Thanks so much in advance

  Save Cancel
• 

  0

  alper created 3 years ago

  Support Team Director

  checkout the following PR https://github.com/abpframework/abp/pull/1588/files

  Save Cancel
• 

  0

  piseth created 3 years ago

  checkout the following PR https://github.com/abpframework/abp/pull/1588/files

  Thank you let me verify with my commercial application and try

  Save Cancel
• 

  0

  piseth created 3 years ago

  In HostDashboard.js, how to import ChartDataLabels from "chartjs-plugin-datalabels"; and Chart.register(ChartDataLabels)?

  I see error Uncaught SyntaxError: Cannot use import statement outside a module

  @albert @ismcagdas: please help!

  Save Cancel
• 

  0

  ismcagdas created 3 years ago

  Support Team

  Hi @piseth

  Sorry for the late reply. You can include this plugin to your app by following the steps below;

  1. Install the package to your project

  npm install chartjs-plugin-datalabels --save
  

  2. Then, add the script to abp.resourcemapping.js under your web project

  module.exports = {
      aliases: {
          
      },
      mappings: {
          "@node_modules/chartjs-plugin-datalabels/dist/*.*": "@libs/chartjs-plugin-datalabels/"
      }
  };
  

  3. After all, you can inject the script to the page you want to use. For example, you can include it into HostDashboard.cshtml as shown below;

  @section scripts {
      <abp-script src="/libs/chartjs-plugin-datalabels/chartjs-plugin-datalabels.js" />
      <abp-script src="/Pages/HostDashboard.js" />
  }
  

  4. You can directly use ChartDataLabels in your JS files (HostDashboard.js for example). You can't modify existing charts on the HostDsahboard becasue those are placed to the page from modules. However, you can remove those charts and create your own chards and use ChartDataLabels in them. You can take a look at https://github.com/chartjs/chartjs-plugin-datalabels/discussions/215 for a sample usage.

  Save Cancel
• 

  0

  piseth created 3 years ago

  <abp-script src="/Pages/HostDashboard.js" />

  Thank you very much. I already followed that instruction, but i got errors: Uncaught TypeError: Cannot read property 'helpers' of undefined at chartjs-plugin-datalabels.js?_v=637646541508580000:10 at chartjs-plugin-datalabels.js?_v=637646541508580000:11 chartjs-plugin-datalabels.esm.js:7 Uncaught SyntaxError: Cannot use import statement outside a module chartjs-plugin-datalabels.min.js?_v=637646541508580000:7 Uncaught TypeError: Cannot read property 'helpers' of undefined at chartjs-plugin-datalabels.min.js?_v=637646541508580000:7 at chartjs-plugin-datalabels.min.js?_v=637646541508580000:7 ** Uncaught ReferenceError: ChartDataLabels is not defined**

  Here are what i have configured

  1/ install this package in my web project npm install chartjs-plugin-datalabels --save

  2/ i also add "chartjs-plugin-datalabels": "^2.0.0", inside package.json

  3/ here is my abp.resourcemapping.js

  4/ i also run yarn and gulp and i see them copy all chartjs-plugin-datalabels in my lib folder

  5/ I created a folder named "WeeklyTop5BundlesPurchasedPieChart" under /Pages/Shared/Component/...

  

  

  

  Save Cancel
• 

  0

  piseth created 3 years ago

  Hi @piseth

  We will assist you via email.

  I sent my whole complete working project to info@abp.com please help to look through it and tell me which parts i miss

  Save Cancel
• 

  0

  alper created 3 years ago

  Support Team Director

  hi piseth,

  we got your project. we'll inspect and get back to you soon.

  Save Cancel
• 

  0

  EngincanV created 3 years ago

  Support Team .NET Developer

  Hi @piseth, we've integrated the plugin package into your project and send it back to you via e-mail.

  Save Cancel