Coder Social home page Coder Social logo

rinminase / ng-charts Goto Github PK

View Code? Open in Web Editor NEW
16.0 3.0 4.0 2.73 MB

🎨📉 A fully functional Angular 14+ Chart.js library based from ng2-charts

Home Page: http://ng-charts.netlify.app

License: MIT License

TypeScript 100.00%
angular ng-charts chart-js npm-package circleci chart

ng-charts's Issues

Doesn't show tooltips in last version

public chartColor: DatasetColor[] = [
{
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#2196f3',
borderWidth: 1,
pointBorderColor: 'orange',
hoverBackgroundColor: 'green'
},
];

public chartType: ChartType = 'line';
public options: ChartOptions = {

responsive: true,
legend: {
  display: false,
},
tooltips: {
  bodyFontColor: 'black',
  callbacks: {
    label: function (tooltipItem) {
      debugger;
      return '$' + Number(tooltipItem.yLabel) + ' and so worth it !';
    },
  },
  enabled: true,
  
},
scales: {
  xAxes: [
    {
      display: false,
    },
  ],
},

};

Error @rinminase/ng-charts ɵɵFactoryDeclaration

Version

"@rinminase/ng-charts": "^4.2.1",

Expected Behavior

Not error

Current Behavior

import * as i0 from "@angular/core";
import * as i1 from "./base-chart.directive";
export declare class ChartsModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ChartsModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ChartsModule, [typeof i1.BaseChartDirective], never, [typeof i1.BaseChartDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration;
}

Steps to Reproduce

  1. ng serve

Possible Reasons and Suggestions

Log error

static ɵprov: i0.ɵɵInjectableDeclaration;

Error when I try to import @rinminase/ng-charts

Hello! I'm using Angular 9 and receive this error when I try to import this library. Can you please help me?

Also, the link for Pie Chart that you recommend is: Pie Chart that imports chart.js in his project for setting ChartType and ChartOptions. Should I import chart.js as well? Thanks

**

ERROR in node_modules/@rinminase/ng-charts/lib/charts.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@rinminase/ng-charts) which declares ChartsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

**

ThemeService error reported in console

Two problems:

  • Label and Color is not part of ng-charts, its named ChartColor and ChartLabel.
  • ERROR NullInjectorError: StaticInjectorError(AppModule)[BaseChartDirective -> ThemeService]:
    StaticInjectorError(Platform: core)[BaseChartDirective -> ThemeService]: NullInjectorError: No provider for ThemeService!
    in chrome console.

I followed your line example

Ionic - no chart rendered

Expected Behavior

A radar chart to be rendered

Current Behavior

Blank space

Steps to Reproduce

  1. Init an ionic project
  2. add the sample radar as a new component
  3. add path from app-routing module to render the radar component

Possible Reasons and Suggestions

Something to do with ionic?

MomentJS - Deprecating warning

Hi,
MomentJS package depreacted one of methods and I get a warning in browser.

Expected Behavior

Please fix it - change creating proper date using moment package.

Current Behavior

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

Steps to Reproduce

  1. Add chart with type datetime

Possible Reasons and Suggestions

Momentjs deprecated one of method

Possible to define text inside doughnut chart

Hi,
I know it's a feature but I need to display some text (two lines) in the middle of doughnut chart.
I know I can set position absolute and next try to set proper left position but I need to support different resolutions.
Currently I have a problem between 1200px and 1370px

image

image

ChartsModule cannot be imported

I am trying to use this library for angular version 13.2.0.
When I try to import ChartsModule from your framework, it gives an error but NgChartsModule works. Can you please create a stackbliz example using this NgChartsModule? I am suing chartjs v3.5+

Chart Colours only uses first array item

If you provide an array of colours to be used, only the first item is used and colours all segments/lines with that colour.

Expected Behavior

Each segment should have the defined colour from the array

Current Behavior

Currently all segments get the same colour

Steps to Reproduce

A slight modification to one of the examples in the readme demonstrates the issue. Three colours given in the array, #f00, #0f0, #00f. The pie chart is then renders with all segments set as #f00

https://stackblitz.com/edit/ng-charts-pie-3twyyr

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.