Neverending Programming Mistakes
    Have ideas to improve npm?Join in the discussion! »

    angular-froalacharts
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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.

    Install

    npm i angular-froalacharts

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    273 kB

    Total Files

    49

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar