Js-charts-line NPM

Template chartsjs type line. Bootstrap 4 compatible. Because use css classes in bootstrap 4.

Installation In Local

Clone the repo gitlab

git clone https://gitlab.com/ayoub-sifaou/jschartsline.git

Clone the repo github

git clone https://github.com/ayoub-sifaou/jschartsline.git

Install NPM packages
```
npm install
```
Run server package
```
npx webpack serve --mode=development
```

Installation In Project

Install NPM packages
```
npm i js-charts-line
```

Import js packages

import ChartsJs from 'js-charts-line/src/charts'

Import scss or css packages

@import "~js-charts-line/dist/chartsJs.css";
---OR--
@import "~js-charts-line/src/scss/chartsJs";

Import style jsChartsLine with bootstrap 4

@import "~js-charts-line/src/scss/styles";

Example

$(elements).chartsJs({
     data: [31, 40, 20, 18, 48, 14, 35, 20, 50],
     colors: ['#6480AD', '#FF5000', '#FACA68', '#77A4AA', '#2F3F58', '#6480AD', '#FF5000', '#FACA68', '#6480AD'],
     labels: ['legend 1', 'legend 2', 'legend 3', 'legend 4','legend 5', 'legend 6', 'legend 7', 'legend 8','legend 9'],
     legend: {
         show: true,
         element: '.legendApexCharts1',
         numberItemInContainer: 1,
         font: {
             size: 14,
             family: "'Roboto-Regular' , sans-serif"
         },
         bootstrap: {
             row: {
                 col: 1,
             }
         },
         iconStyle: {
             width: 40,
             height: 12,
             borderRadius: 5,
         }
     },
     charts: {
         height: 350,
         borderRadius: 0,
         label: {
             show: true,
             font: {
                 size: 20,
                 family: "'Roboto-Black' , sans-serif"
             },
         },
         color: {
             defaultColor: '#D8D8D8',
         },
         fill: {
             show: true,
             dropShadow: {
                 show: true,
                 top: 0,
                 left: 6,
                 blur: 30,
                 color: '#000000',
                 opacity: 0.08
             },
             gradient: {
                 opacity: {
                     to: 0.23,
                     for: 0.01
                 }
             }
         },
         line: {
             afterWidth: {
                 width: 55,
                 borderRadius: {
                     show: true,
                 }
             },
             width: 35,
             dropShadow: {
                 show: true,
                 top: 0,
                 left: 10,
                 blur: 30,
                 opacity: 0.2
             },
             maxLines: 12,
         }
     },
     style: {
         element: 'charts-one'
     }
 });

Screenshot