93alliance / ng-chartjs Goto Github PK

I moved my project to angular 11. Then upgraded the modules to following versions.

"chart.js": "2.9.4",
"chartjs-plugin-annotation": "0.5.7",
"ng-chartjs": "0.2.1"
"@types/chart.js": "2.9.31",

I end up getting this error. I also tried using all most recent versions of each modules but error does not go away. How can we move Forward.

node_modules/ng-chartjs/node_modules/chart.js/types/index.esm"' has no exported member 'ChartDataSets'.

18     datasets: Chart.ChartDataSets[];
                       ~~~~~~~~~~~~~


Error: node_modules/ng-chartjs/lib/ng-chartjs.directive.d.ts:37:12 - error TS2709: Cannot use namespace 'Chart' as a type.

37     chart: Chart;
              ~~~~~

If I use old versions we use in angular 7 after upgrading to angular 11, we get following error
"ng-chartjs": "0.0.9",
"chart.js": "2.9.3",
"@types/chart.js": "2.7.42",

R3InjectorError(DashboardModule)[NgChartjsService -> InjectionToken [ngx-chart-js] Global Custom Plugin -> InjectionToken [ngx-chart-js] Global Custom Plugin -> InjectionToken [ngx-chart-js] Global Custom Plugin -> InjectionToken [ngx-chart-js] Global Custom Plugin]:
NullInjectorError: No provider for InjectionToken [ngx-chart-js] Global Custom Plugin!

Is it possible to use "chartjs-plugin-zoom": "0.7.7" with this lib.
I tried this approach but it did not work.

this.lineChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
 
  scales: {
    xAxes: [
      {
        type: 'time',
        distribution: 'linear',
      }
    ],
    yAxes: [{
      ticks: {
        stepSize: 5,
        precision: 0,
      }
    }]
  },
  annotation: {
    annotations: []
  },
  plugins: {
    zoom: {
      // Container for pan options
      pan: {
        // Boolean to enable panning
        enabled: true,

        // Panning directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow panning in the y direction
        mode: 'xy'
      },

      // Container for zoom options
      zoom: {
        // Boolean to enable zooming
        enabled: true,

        // Zooming directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow zooming in the y direction
        mode: 'xy',
      }
    }
  },
};

Using
"chart.js": "^2.9.4",
"chartjs-plugin-annotation": "^0.5.7",
"chartjs-plugin-zoom": "0.7.7",
"ng-chartjs": "0.2.3",

ERROR in node_modules/ng-chartjs/lib/ng-chartjs.directive.d.ts:42:9 - error TS1086: An accessor cannot be declared in an ambient context.

42 get chart(): Chart;

[13:07:02] Angular CLI: 8.3.26
[13:07:02] Node: 12.16.2
[13:07:02] OS: win32 x64
[13:07:02] Angular: 8.1.3
[13:07:02] ... animations, common, compiler, compiler-cli, core, forms
[13:07:02] ... language-service, platform-browser, platform-browser-dynamic
[13:07:02] ... router
[13:07:02]
[13:07:02] Package Version
[13:07:02] -----------------------------------------------------------
[13:07:02] @angular-devkit/architect 0.801.3
[13:07:02] @angular-devkit/build-angular 0.801.3
[13:07:02] @angular-devkit/build-optimizer 0.801.3
[13:07:02] @angular-devkit/build-webpack 0.801.3
[13:07:02] @angular-devkit/core 8.1.3
[13:07:02] @angular-devkit/schematics 8.3.26
[13:07:02] @angular/cli 8.3.26
[13:07:02] @ngtools/webpack 8.1.3
[13:07:02] @schematics/angular 8.3.26
[13:07:02] @schematics/update 0.803.26
[13:07:02] rxjs 6.4.0
[13:07:02] typescript 3.4.5
[13:07:02] webpack 4.35.2

Hi, thank you for your work! I'm unsure which package to use: ng2-charts or ng-chartjs. What was your motivation to create ng-chartjs and which advantages do I get when using it instead of ng2-charts?

I'm facing a problem, when running with --prod flag I get this error in console after following your example here @93Alliance : (#21)

Any ideas how to fix it? without --prod flag it works pretty good but I need it to be prod valid, thanks!
P.S. I've imported the module in a lazy loaded module, if I just import it in AppComponentModule it will not recognise the import.

Hello, I want to have the pie chart values groupped, i see that I can do that with Labels, but for the values I can't have an array of values, do you guys know a way to achieve this?
As you can see in the photo only the first label has the corresponding value, but the 2nd one doesnt.
Thanx!

HI 93Alliance,
thanks for continuing to maintain this btw

I do have a problem with updating the chartType when pressing a button.

This is my chart:

<div style="width: 1000px; text-align: center; margin-top:20px">
  <canvas id="chart" ngChartjs [datasets]="chartData" [labels]="chartLabels" [options]="chartOptions"
    [legend]="chartLegend" [chartType]="chartType">
  </canvas>
</div>

And this is what I do to update the chart:

this.chartType = 'bar';
this.chartData = [
    {
        label: 'name',
        data: [1, 2, 3]
}];
this.chartLabels = ['newlabel1', 'newlabel2', 'newlabel3'];

Now, the values and the labels update, but the type of the chart doesnt change.

Appreciate your help,
-T0Bi

Hello, SOrry to ask you for this her but it's the only way to get to you
anyway I just want to ask you if you can fix the Server crash in the extension qmlhelper, or make it live so I can fix it plz, because it's hard to read and try to fix the bug from the machine code _, because with the update of Qt 6.6.0 we can easly devlope Qml files inside Vs Code

Angular 7

after upgrading the project to angular 6 to 7. datalabels plugin stopped showing the labels. Do you know any workaround?

I tried using the method described in the main page to get the chart istance, but it isn't working. The getChart method returns null despite the id being the correct one.
Because of this, I can't call chart.update(). I've been able to have the chart update data/labels automatically through replacing arrays, but this doesn't work for options, so I don't know how to change them after creating the chart (assigning a new options object does nothing).
I also see there is a resetOption field, but it's not clear how to use it and my understanding is it can't be called from the javascript side, only the template (which doesn't do it for me, I need to do it before putting new data into the chart without input from user).
What i want to do is change the label for my y axis after the chart has been created. Is there any fix or workaround for this?

hi i have the following error inside the file:
plugin-token.d.ts:

import { InjectionToken } from '@angular/core';

'@angular/core has not export member InjectionToken'
Thanks

Angular already has date parsing/formatting functions in @angular/common.

Rather than needing to separately add the date-fns, moment, etc. adaptor, this module could provide one itself that can be used without additional dependencies.

I am facing problem when i am trying to get datasets or labels by function .
Probably the reason for this problem graph is loaded before the function call.

This is my chart: Component.html

<canvas ngChartjs [datasets]="lineChartData" [colors]="lineChartColors" [labels]="labels" [options]="lineChartOptions" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)"[inlinePlugins]="inlinePlugin" width="561" height="290" style="width: 561px; height: 290px;">

This is my Component.ts

ngOnInit() {

this.labels = ['Dec 17','Jan 18','Feb 18','Mar 18','Apr 18','May 18','Jun 18','Jul 18','Aug 18','Sep 18','Oct 18','Nov 18','Dec 18','Jan 19','Feb 19','Mar 19','Apr 19','May 19','Jun 19','Jul 19','Aug 19','Sep 19','Oct 19','Nov 19','Dec 19','Jan 20','Feb 20'];

}

lineChartLabels = this.labeltest

The image below shows how annotations are rendered on angular deployment on IIS (yarn build:prod) and development (yarn start/ng serve). In the former case, annotations are not visible but in the development cases, they are visible.

How to solve this?

I also tried following with no luck.
https://stackoverflow.com/questions/56706507/chart-js-line-from-annotations-plugin-is-not-appearing

I am using angular 7, following libs

 
    "chart.js": "2.7.3",
    "ng-chartjs": "0.0.9",
    "chartjs-plugin-annotation": "0.5.7"
  },
  "devDependencies": {
    "ts-node": "^8.6.2",
    "tslint": "~5.11.0",
    "typescript": "3.1.6",
    "@types/chart.js": "2.7.42"
  }

we moved from ng 12 to 14. Now the certain features of the ng-chartjs is not working. Will there be a new version?

[Question]
I have a case where annotations and chart data are on different time ranges.

annotations [10.30AM, 4.45PM, 6.15PM, 8PM] // few events scattered

chart Data [11Am, 12PM, 1PM ........., 7PM] // every hour

If I plot these on the same chart with X axis with time unit hour and labels generated from 10.30 PM to 8PM, the line chart would be totally misaligned.
Is there a way to plot them correctly in a single chart?

Chart namespace is not a type causing the issue with the example to not work.

ERROR in node_modules/ng-chartjs/lib/ng-chartjs.directive.d.ts:18:21 - error TS2694: Namespace '"C:/Users/SiliconSwamp/Documents/apps/kompwnd-frontend/node_modules/chart.js/types/index.esm"' has no exported member 'ChartDataSets'.

18     datasets: Chart.ChartDataSets[];
                       ~~~~~~~~~~~~~
node_modules/ng-chartjs/lib/ng-chartjs.directive.d.ts:37:12 - error TS2709: Cannot use namespace 'Chart' as a type.

37     chart: Chart;
              ~~~~~

Will Angular v14.x, v15.x be supported?

Will Angular 13 be supported?

I am trying to change the background color of the stacked bar chart. But it does not apply.

https://stackblitz.com/edit/angular-8qvt2f?file=src%2Fapp%2Fapp.component.ts

This is my scenario

I have a presentation component with canvas
<canvas ngChartjs id="mainChart" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [legend]="lineChartLegend" [chartType]="lineChartType">

This component is used by two smart/data components, say temp-chart and rain-chart.

When I try to show both temp-chart and rain-chart on the main page at the same time.
this.ngChartjsService.getChart('mainChart'); cannot figure out the correct instance endup creating a mess. I think the issue is the storeService code below uses the id which is 'mainChart' in this case and ends up giving the same chart instance for both smart components creating these rendering issues.

this.storeService.addChart(this.element.nativeElement.id, this.chart);

Is there a way to get around it. I am using Angular 7 and "ng-chartjs": "0.0.9".

Am I correct that the (chartclick) event is not supported for the line-charts ?
I can't get it to work.

I couldn't run the project and it cannot find the module

'@angular-devkit/build-angular/package.json

Thanks for the great directive! I tried using the @input colors to override the colors but it didn't work. I dug into your code a bit and found that this line of code https://github.com/93Alliance/ng-chartjs/blob/master/projects/ng-chartjs/src/lib/ng-chartjs.directive.ts#L244 will never be try because it should be an object instead of an array.

If you change it to:

if (this.colors) {
    Object.assign(newElm, this.colors);
}

It will allow users to override, however I'm not sure if your code depends on the index variable or not, but from my understanding it isn't necessary.

Would also be able to expose your colors.ts file so we can take advantage of those nice functions too?