angular-froalacharts

Simple and lightweight official Angular component for FroalaCharts. `angular-froalacharts` enables you to add JavaScript charts in your Angular application without any hassle.

Showing:

Popularity

Downloads/wk

8

GitHub Stars

0

Maintenance

Last Commit

1yr ago

Contributors

14

Package

Dependencies

15

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

angular-froalacharts

Simple and lightweight official Angular component for FroalaCharts. angular-froalacharts enables you to add JavaScript charts in your Angular application without any hassle.


Table of Contents

Getting Started

Requirements

  • Node.js, NPM/Yarn installed globally in your OS.
  • You've an Angular Application.
  • FroalaCharts installed in your project, as detailed below:

Installation

To install angular-froalacharts library, run:

$ npm install angular-froalacharts --save

To install froalacharts library:

$ npm install froalacharts --save

Quick Start

Here is a basic sample that shows how to create a chart using angular-froalacharts:

Add this in your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import angular-froalacharts
import { FroalaChartsModule } from 'angular-froalacharts';

// Import FroalaCharts library and chart modules
import * as FroalaCharts from 'froalacharts';;

import * as FroalaTheme from 'froalacharts/themes/froalacharts.theme.froala';

// Pass the froalacharts library and chart modules
FroalaChartsModule.fcRoot(FroalaCharts, FroalaTheme);

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Specify FroalaChartsModule as import
    FroalaChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Once the library is imported, you can use its components, directives in your Angular application:

In your Angular AppComponent:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  dataSource: Object;
  title: string;

  constructor() {
    this.title = 'Angular  FroalaCharts Sample';

    this.dataSource = {
      chart: {
        caption: 'Countries With Most Oil Reserves [2017-18]',
        subCaption: 'In MMbbl = One Million barrels',
        xAxisName: 'Country',
        yAxisName: 'Reserves (MMbbl)',
        numberSuffix: 'K',
        theme: 'froala'
      },
      data: [
        { label: 'Venezuela', value: '290' },
        { label: 'Saudi', value: '260' },
        { label: 'Canada', value: '180' },
        { label: 'Iran', value: '140' },
        { label: 'Russia', value: '115' },
        { label: 'UAE', value: '100' },
        { label: 'US', value: '30' },
        { label: 'China', value: '30' }
      ]
    };
  }
}
<!-- You can now use froalacharts component in app.component.html -->
<h1>
  {{title}}
</h1>
<froalacharts
    width="600"
    height="350"
    type="pie"
    dataFormat="JSON"
    [dataSource]="dataSource"
></froalacharts>

For Contributors

  • Clone the repository and install dependencies
$ git clone https://github.com/froala/angular-froalacharts.git
$ cd angular-component
$ npm i
$ npm start

Licensing

The FroalaCharts Angular component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a separate license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial