@542.digital/chart-library

Chart library is a collection of charting libraries used to create interactive charts.

The chart library exposes the consolidated chart library Javascript bundle to be placed in a <script> tag on a page as well as plugins which can be used within React.

Libraries Inside

• Highcharts: used to power simple and complex data visualizations.
• Vizzu: used to power animated data visualizations and data stories.

Installation

npm install @542.digital/chart-library

Usage

To use the consolidated chart library Javascript bundle,

1. Insert the postinstall:highcharts script in the package.json scripts section of the project.

   {
     "scripts": {
       "postinstall:highcharts": "cd ./node_modules/@542.digital/chart-library/scripts && ./setup-window-highchart-location.sh"
     }
   }

   This command runs the shell script which copies the combined chart library Javascript files into the current project.

2. Run the postinstall:highcharts script by executing the command:

   npm run postinstall:highcharts

   Follow the setup instruction by either using the predefined paths or a custom path.

3. Reference the copied file in any page using the <script> tag.

Local Bundling

Local bundling of the chart library is not needed as it is bundled and published in the pipeline. However, you may want to test the bundling in the local environment whenever a change is made.

To create a local bundle,

1. Execute npm run build. This will create a local bundle in the /dist folder. The file name starts with combinedHighcharts-hv followed by the Highchart version number.

Testing

The Cypress test is included as a stage in the pipeline. To run the Cypress test locally,

1. Run nvm use to use the current node version.
2. Execute npm run cy:run to launch the test.
3. If the Highcharts version is upgraded, ensure the index.html file script reference is also updated. That is, ensure the <script src="./dist/combinedHighcharts-hvX.X.X.js"></script> points to the correct version number represented as X.X.X. Else, there will be errors as the referenced combined Highcharts javascript file won't be found.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

Chart-library is licensed under the MIT License - see the LICENSE file for details.