{"id":13989883,"url":"https://github.com/avdaredevil/highcharts-chart","last_synced_at":"2025-03-17T15:13:09.472Z","repository":{"id":43651122,"uuid":"45994051","full_name":"avdaredevil/highcharts-chart","owner":"avdaredevil","description":"Polymer Element wrapper for highcharts library. Seamlessly create various types of charts from one element.","archived":false,"fork":false,"pushed_at":"2022-02-26T01:37:28.000Z","size":4548,"stargazers_count":96,"open_issues_count":1,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-08T09:12:57.396Z","etag":null,"topics":["barchart","bower","boxplot","chart","chart-component","google-polymer","graph","graphing","highcharts","highcharts-chart","pie-chart","plot","plotting","polymer","visualization","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avdaredevil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-11T16:36:15.000Z","updated_at":"2024-11-10T22:54:59.000Z","dependencies_parsed_at":"2022-09-09T08:51:44.666Z","dependency_job_id":null,"html_url":"https://github.com/avdaredevil/highcharts-chart","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avdaredevil%2Fhighcharts-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avdaredevil%2Fhighcharts-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avdaredevil%2Fhighcharts-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avdaredevil%2Fhighcharts-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avdaredevil","download_url":"https://codeload.github.com/avdaredevil/highcharts-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713398,"owners_count":20335567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barchart","bower","boxplot","chart","chart-component","google-polymer","graph","graphing","highcharts","highcharts-chart","pie-chart","plot","plotting","polymer","visualization","webcomponents"],"created_at":"2024-08-09T13:02:08.509Z","updated_at":"2025-03-17T15:13:09.447Z","avatar_url":"https://github.com/avdaredevil.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u0026lt;highcharts-chart\u0026gt; [![npm version](https://badge.fury.io/js/highcharts-chart.svg)](https://badge.fury.io/js/highcharts-chart) [![Bower version](https://badge.fury.io/bo/highcharts-chart.svg)](http://badge.fury.io/bo/highcharts-chart) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/avdaredevil/highcharts-chart)\n\n\u003e Web Component wrapper to the [Highcharts Graphing Library](http://www.highcharts.com/), to create a multitude of graphs/maps (spline, pie, and more) using [Polymer 3.0](http://www.polymer-project.org/3.0/).\n\n## Demo\n\nYou can see a [Realtime/Resonsive demo live](http://avdaredevil.github.io/highcharts-chart)! With a Tutorial Icon in the top right.\n\n## Install\n\nInstall the component using [npm](https://www.npmjs.com/):\n\n```sh\n$ npm install highcharts-chart --save\n```\n\nOr [download as ZIP](https://github.com/avdaredevil/highcharts-chart/archive/master.zip).\n\n## Usage\n\n1. Import Web Components' polyfill, on older browsers:\n\n    ```html\n    \u003cscript src=\"bower_components/webcomponentsjs/webcomponents-lite.min.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Import Custom Element:\n\n    ```html\n    \u003cscript type=\"module\" src=\"node_modules/highcharts-chart/highcharts-chart.js\"\u003e\u003c/script\u003e\n        OR\n    \u003cscript type=\"module\"\u003e\n        import 'node_modules/highcharts-chart/highcharts-chart.js';\n    \u003c/script\u003e\n        OR\n    \u003cscript\u003e\n        import('node_modules/highcharts-chart/highcharts-chart.js');\n    \u003c/script\u003e\n    ```\n\n3. Start using it!\n    \u003c!--\n    ```\n    \u003ccustom-element-demo\u003e\n      \u003ctemplate\u003e\n        \u003cscript type=\"module\" src=\"highcharts-chart.js\"\u003e\u003c/script\u003e\n        \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n      \u003c/template\u003e\n    \u003c/custom-element-demo\u003e\n    ```\n    --\u003e\n\n    ```html\n    \u003chighcharts-chart x-zoom type=\"spline\"\n                      title=\"Test-Spline Chart\"\n                      data='[[0,0],[1,7],[2,1],[3,6],[4,8],[5,6]]'\n                      x-label=\"Iterations\" y-label=\"Awesomeness Index\"\u003e\u003c/highcharts-chart\u003e\n    ```\n\n    #### Other Examples\n    ```html\n    \u003chighcharts-chart type=\"pie\"\u003e\u003c/highcharts-chart\u003e\n    \u003chighcharts-chart type=\"column\"\u003e\u003c/highcharts-chart\u003e\n    \u003chighcharts-map\u003e\u003c/highcharts-map\u003e\n    \u003chighcharts-stock\u003e\u003c/highcharts-stock\u003e\n    ```\n\n## \u0026lt;highcharts-chart\u0026gt;\n\nProvides you a simple interface to interact with the HighCharts API, with extensive Data Binding.\nThe charting is also responsive.\n\n### Options\n\nAttribute  | Options     | Default              | Description\n---        | ---         | ---                  | ---\n`type`     | `spline`,`pie`,`column` | `spline` | Pick type of chart\n`title`    | *string*    | `Highcharts Chart`   | Title of Chart\n`subtitle` | *string*    | `\"\"`                 | Subtitle of Chart\n`xAxis`    | *object*    | `{}` OR *`Time based`* | Specifies the configuration for the X-Axis.\n`yAxis`    | *object*    | `{}` | Specifies the configuration for the Y-Axis.\n`xLabel`   | *string*    | `X-Axis`             | Label for X-Axis\n`yLabel`   | *string*    | `Y-Axis`             | Label for Y-Axis\n`xZoom`   | *boolean*    | `false`             | Zooming Allowed On X-Axis\n`yZoom`   | *boolean*    | `false`             | Zooming Allowed On Y-Axis\n`label`    | *string*    | `Label`*`[for non numeric]`* | Alias for both Axis\n`data`     | *array*     | `[]` | Data for chart [*data for Series 1* OR *array of series*]\n`loading`  | *boolean*     | `false` | Toggle loading overlay on chart\n`loadingMessage` | *string* | `Loading...` | Loading Text Display\n`selected` | *boolean `[readonly]`*     | `false` | Is any element selected on graph\n`selectedPoints` | *array `[readonly]`* | `[]` | Which elements are selected\n`vsTime`   | *boolean*     | `false` | Set all options appropriate for a time chart\n`chartOptions` | *object*  | `{}` | Override/Add Properties for your type of chart\n`export`   | *boolean*     | `false` | Enable exporting of chart\n`legend`   | *boolean*     | `false` | Display the legend\n`colorByPoint`__\\*__ | *boolean* | `false` | Every point treated/colored uniquely\n`credits`  | *boolean*     | `false` | Wish to thank/credit HighCharts?\n`legendOptions` | *object* | `{}` | Override/Add Options to your legend\n`tooltipOptions` | *object* | `{}` | Override/Add Options to your tooltip\n`highchartOptions` | *object* | `{}` | Override/Add Options to the chart initalization code [useful for custom charts]\n`height-responsive` | *Attribute* | `NA` | Make chart height responsive [*define container height for this to work*]\n`renderer` | *object `[readonly]`* | `{}` | Allows direct access to the Highcharts rendering layer in order to draw primitive shapes like circles, rectangles,paths or text directly on a chart, or independent from any chart.\n`_chart` | *object `[readonly]`* | `{}` | HighCharts exposed object\n\n**Note:** \n- The __\\*__ annotated properties above are not available in the `highcharts-map` element\n- 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\n\n### Methods\n\nMethod       | Parameters           | Description\n---          | ---                  | ---\n`setData(data,z=0)`  | `Data Array`,`Series Index` | Replaces series data with the passed array\n`addData(x,y,z,drill)`  | `x`,`y`,`index`,`drillable?` | Appends to data [*efficient*]\n`pushData(x,y,z)` | `x`,`y`,`index` | Shifts and adds to data [*efficient*]\n`addSeries(name,data,colorByPoint,otherOptions)` | `String`,`Array`,`boolean`,`{}`  | Adds a new Series to Plot\n`addDrillSeries(point,data,name)` | `point`,`Array`,`String`   | Adds a series that is viewable when an Element is clicked into\n`getSeries(z=0)` | `index`   | Fetch a series [given by `z`], else return a dummy object\n`updateSeries(k,v,z)` | `String`,`Mixed`,`0`   | Modifies an option by Key Value for series [given by `z`]\n`updateSeries(options,z)` | `{}`,`0`   | Modifies the options for series [given by `z`]\n`removeSeries(z,redraw)` | `index`,`true`  | Removes Series denoted by index [should redraw after remove]\n`showLoading(t)`__\\*__ | `t [Text]` | Sets `Loading-Message` equal to `t` then turns on loading screen\n`resizeChart()` | `none`   | Efficient reflow of the chart to parent [*can be attached to a parent resize*]\n`resizeChartFixed()` | `none`   | Fixed Adjustment of chart [*use if chart should not fluctuate over minor size changes*]\n`zoomOut()` | `none`   | Zoom out the chart\n`reRender()` | `none`   | Will force a complete re-render of the Highchart [*use it when binding is not possible*]\n`downloadAs(name,options)` | `chart`,`{}` | Download/Export the chart as a file\n`destroy()` | `none`   | Free's up the memory used by the chart [*prevents __memory leaks__*]\n\n**Note:** The __\\*__ annotated methods above are not available in the `highcharts-map` element\n\n### Events\n\nEvent      | Description             | Payload [*`e.detail`*]\n---        | ---                     | ---\n`chart-click` | Click event on chart | `e` [*original event*], `chart` [*chart object*], `component` [*self*]\n`chart-load` | Fired when chart loaded | `e`, `chart`, `component`\n`before-print` | Fired before chart print | `e`, `chart`, `component`\n`after-print` | Fired after chart print | `e`, `chart`, `component`\n`series-added` | Fired when series added | `e`, `chart`, `component`\n`drill-down` | Fired when drill down is triggered | `e`, `chart`, `component`\n`drill-up` | Fired when drill up is triggered | `e`, `chart`, `component`\n`drill-up-all` | In a chart with multiple drilldown series, this event fires after all the series have been drilled up | `e`, `chart`, `component`\n`selection` | Fired when a range of points are selected | `e`, `chart`, `component`\n`redraw` | Fires when the chart is redrawn | `e`, `chart`, `component`\n`render` | Fires after initial load of the chart, and after each redraw | `e`, `chart`, `component`\n\n### Styling\n\nMixin       | Description\n---         | ---\n`--highcharts-min-height` | Min Height for Highcharts-Chart container [default: *26em*]\n`--highcharts-container` | The container that directly contains the Chart SVG\n\n## Contributing/Suggestions\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request\n\n\n## Install the Polymer-CLI\n\nFirst, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (_packaged with [Node.js](https://nodejs.org)_) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.\n\n## Viewing Your Element\n\n```\n$ polymer serve\n```\n\n## Running Tests\n\n```\n$ polymer test\n```\n\nYour application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.\n\n\n***Note:** Polymer 3 docs and migration done by: @mindon 2018-10-19*\n\n## License\n\n[MIT License](http://avdaredevil.mit-license.org/) © Apoorv Verma\n\n[![LinkedIn](https://cloud.githubusercontent.com/assets/5303018/22671513/a17b9946-ec9c-11e6-8700-5d6b709c4aee.png)](https://www.linkedin.com/in/apoorvverma)\n\n\u003c!--- Was: https://img.shields.io/badge/Linked-In-blue.svg --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favdaredevil%2Fhighcharts-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favdaredevil%2Fhighcharts-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favdaredevil%2Fhighcharts-chart/lists"}