<highcharts-chart>

Web Component wrapper to the Highcharts Graphing Library, to create a multitude of graphs/maps (spline, pie, and more) using Polymer 3.0.

Demo

You can see a Realtime/Resonsive demo live! With a Tutorial Icon in the top right.

Install

Install the component using npm:

$ npm install highcharts-chart --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill, on older browsers:

   <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

2. Import Custom Element:

   <script type="module" src="node_modules/highcharts-chart/highcharts-chart.js"></script>
       OR
   <script type="module">
       import 'node_modules/highcharts-chart/highcharts-chart.js';
   </script>
       OR
   <script>
       import('node_modules/highcharts-chart/highcharts-chart.js');
   </script>

3. Start using it!

   <highcharts-chart x-zoom type="spline"
                     title="Test-Spline Chart"
                     data='[[0,0],[1,7],[2,1],[3,6],[4,8],[5,6]]'
                     x-label="Iterations" y-label="Awesomeness Index"></highcharts-chart>

   Other Examples

   <highcharts-chart type="pie"></highcharts-chart>
   <highcharts-chart type="column"></highcharts-chart>
   <highcharts-map></highcharts-map>
   <highcharts-stock></highcharts-stock>

<highcharts-chart>

Provides you a simple interface to interact with the HighCharts API, with extensive Data Binding. The charting is also responsive.

Options

Note:

• The * annotated properties above are not available in the highcharts-map element
• If you bind a bunch of series objects to the data property instead of data for a single series, it will perform series level binding

Methods

Note: The * annotated methods above are not available in the highcharts-map element

Events

Styling

Contributing/Suggestions

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Note: Polymer 3 docs and migration done by: @mindon 2018-10-19

License

MIT License © Apoorv Verma