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

    svelte-froalacharts

    1.0.0 • Public • Published

    svelte-froalacharts

    Simple and lightweight Svelte component for FroalaCharts. svelte-froalacharts enables you to add JavaScript charts in your Svelte application or project without any hassle.


    Table of Contents

    Getting Started

    Requirements

    • Node.js, NPM/Yarn installed globally in your OS.
    • FroalaCharts and Svelte installed in your project, as detailed below:

    Installation

    There are multiple ways to install svelte-froalacharts component.

    Install from NPM

    npm install --save svelte-froalacharts
    

    See npm documentation to know more about npm usage.

    Usage

    Import svelte-froalacharts and FroalaCharts in your app:

    <script>
      import FroalaCharts from 'froalacharts/core';
      import SvelteFC, { fcRoot } from 'svelte-froalacharts';
    
      fcRoot(FroalaCharts);
    </script>
    

    Note: This way of import will not work in IE11 and below.

    Quick Start

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

    <script>
      import FroalaCharts from 'froalacharts';
      import FroalaTheme from 'froalacharts/themes/froalacharts.theme.froala';
      import SvelteFC, { fcRoot } from 'svelte-froalacharts';
     
      // Always set FroalaCharts as the first parameter
      fcRoot(FroalaCharts, FroalaTheme);
     
      const 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' }
        ]
      };
     
      const chartConfigs = {
        type: 'pie',
        width: 600,
        height: 400,
        dataFormat: 'json',
        dataSource: dataSource
      };
    </script>
     
    <SvelteFC {...chartConfigs} />

    Links to help you get started:

    For Contributors

    • Clone the repository and install dependencies
    $ git clone https://github.com/froala/svelte-froalacharts.git
    $ cd svelte-froalacharts
    $ npm i
    $ npm run dev
    
    • Run npm run build to create a production build.

    Licensing

    The FroalaCharts Svelte 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 svelte-froalacharts

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    50.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar