Ngx-charts: Import of a single chart type module does not work correctly

[ppetzold]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
When importing a single chart type like PieChartModule, the chart common components like tooltips are not working.

Expected behavior
<ngx-charts-pie-chart></ngx-charts-pie-chart> should work correctly when importing PieChartModule

Reproduction of the problem
https://plnkr.co/edit/5Ct4CiXVId7FRzlg5bG2

[Luukschoen]

It should work as expected if you change your import statement from:

import { PieChartModule } from '@swimlane/ngx-charts/release/pie-chart';

to

import { PieChartModule } from '@swimlane/ngx-charts;

[eseliger]

same here, @Luukschoen I think the modules should work on their own as well, shouldn't they? There are probably a lot applications that don't need every type of chart and they are all forced to take the much bigger payload as long as it isn't working with the separate imports

[henriquecustodia]

I'm trying to use only the line-chart component

import { LineChartModule } from '@swimlane/ngx-charts/release/line-chart';

But I catch the errors

I saw the common components are using an external css file instead inline the styles into the js file of the component

For example:

/node_modules/@swimlane/ngx-charts/release/common/tooltip/tooltip.component.css
/node_modules/@swimlane/ngx-charts/release/common/legend/legend.component.css
/node_modules/@swimlane/ngx-charts/release/common/legend/scale-legend.component.css
/node_modules/@swimlane/ngx-charts/release/common/timeline/timeline.component.css
/node_modules/@swimlane/ngx-charts/release/common/legend/advanced-legend.component.css
/node_modules/@swimlane/ngx-charts/release/common/base-chart.component.css

I think inline above css into the component file can fix the problems

Recently I've used a package to inline styles into components

https://github.com/pablodenadai/angular2-inline-template-style#readme

[UPDATE]
The errors above happen only on dev mode

[henriquecustodia]

Importing all chart modules the my app bundle size increase 660kb.

import { NgxChartsModule } from '@swimlane/ngx-charts';

Importing only LineChart (I really need) the app bundle size decrease from 2.69mb to 2.03mb

import { LineChartModule } from '@swimlane/ngx-charts/release/line-chart';

import only the specific chart module has a big diff

[juarezpaf]

@henriquecustodia what steps have you followed to be able to import only a specific module?

[henriquecustodia]

@juarezpaf Hey there, I had to use a workaround.

Import the chart component:

import { LineChartModule } from '@swimlane/ngx-charts/release/line-chart';

@NgModule({
  imports: [
    LineChartModule
  ]
})

Importing only that module will throw some errors on dev mode (I've mentioned here), so I've created a simple node script to inline external css from ngx-chart.

const ngInline = require('angular2-inline-template-style');
const path = require('path');
const fse = require('fs-extra');
const glob = require('glob');

const baseDir = path.join(process.cwd(), 'node_modules/@swimlane/ngx-charts/release');

const paths = glob.sync('**/*.js', { cwd: baseDir });

paths.forEach(filepath => {

    const fullpath = path.join(baseDir, filepath);

    fse.readFile(fullpath, { encoding: 'utf8' })
        .then(content => {
            const fileDir = path.dirname(fullpath);

            return ngInline(content, { base: fileDir, compress: true })
                .then(content => {
                    return fse.writeFile(fullpath, content);
                });
        })

});

You have to run the script after the npm install

// package.json
 "scripts": {
        "postinstall": "node scripts/inline-ngx-chart-styles.js"
}

the package angular2-inline-template-style will inline all ngx-charts components

I hope it can useful! :smile:

[cfremgen]

This should be fixed. See https://github.com/swimlane/ngx-charts/issues/699#issuecomment-459802977