Native Package Manager


    3.0.6 • Public • Published

    <highcharts-chart> npm version Bower version Published on

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


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


    Install the component using npm:

    $ npm install highcharts-chart --save

    Or download as ZIP.


    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>
      <script type="module">
          import 'node_modules/highcharts-chart/highcharts-chart.js';
    3. Start using it!

      <highcharts-chart x-zoom type="spline"
                        title="Test-Spline Chart"
                        x-label="Iterations" y-label="Awesomeness Index"></highcharts-chart>

      Other Examples

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


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


    Attribute Options Default Description
    type spline,pie,column spline Pick type of chart
    title string Highcharts Chart Title of Chart
    subtitle string "" Subtitle of Chart
    xAxis object {} OR Time based Specifies the configuration for the X-Axis.
    yAxis object {} Specifies the configuration for the Y-Axis.
    xLabel string X-Axis Label for X-Axis
    yLabel string Y-Axis Label for Y-Axis
    xZoom boolean false Zooming Allowed On X-Axis
    yZoom boolean false Zooming Allowed On Y-Axis
    label string Label[for non numeric] Alias for both Axis
    data array [] Data for chart [data for Series 1 OR array of series]
    loading boolean false Toggle loading overlay on chart
    loadingMessage string Loading... Loading Text Display
    selected boolean [readonly] false Is any element selected on graph
    selectedPoints array [readonly] [] Which elements are selected
    vsTime boolean false Set all options appropriate for a time chart
    chartOptions object {} Override/Add Properties for your type of chart
    export boolean false Enable exporting of chart
    legend boolean false Display the legend
    colorByPoint* boolean false Every point treated/colored uniquely
    credits boolean false Wish to thank/credit HighCharts?
    legendOptions object {} Override/Add Options to your legend
    tooltipOptions object {} Override/Add Options to your tooltip
    highchartOptions object {} Override/Add Options to the chart initalization code [useful for custom charts]
    height-responsive Attribute NA Make chart height responsive [define container height for this to work]
    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.
    _chart object [readonly] {} HighCharts exposed object


    • 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


    Method Parameters Description
    setData(data,z=0) Data Array,Series Index Replaces series data with the passed array
    addData(x,y,z,drill) x,y,index,drillable? Appends to data [efficient]
    pushData(x,y,z) x,y,index Shifts and adds to data [efficient]
    addSeries(name,data,colorByPoint,otherOptions) String,Array,boolean,{} Adds a new Series to Plot
    addDrillSeries(point,data,name) point,Array,String Adds a series that is viewable when an Element is clicked into
    getSeries(z=0) index Fetch a series [given by z], else return a dummy object
    updateSeries(k,v,z) String,Mixed,0 Modifies an option by Key Value for series [given by z]
    updateSeries(options,z) {},0 Modifies the options for series [given by z]
    removeSeries(z,redraw) index,true Removes Series denoted by index [should redraw after remove]
    showLoading(t)* t [Text] Sets Loading-Message equal to t then turns on loading screen
    resizeChart() none Efficient reflow of the chart to parent [can be attached to a parent resize]
    resizeChartFixed() none Fixed Adjustment of chart [use if chart should not fluctuate over minor size changes]
    zoomOut() none Zoom out the chart
    reRender() none Will force a complete re-render of the Highchart [use it when binding is not possible]
    downloadAs(name,options) chart,{} Download/Export the chart as a file
    destroy() none Free's up the memory used by the chart [prevents memory leaks]

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


    Event Description Payload [e.detail]
    chart-click Click event on chart e [original event], chart [chart object], component [self]
    chart-load Fired when chart loaded e, chart, component
    before-print Fired before chart print e, chart, component
    after-print Fired after chart print e, chart, component
    series-added Fired when series added e, chart, component
    drill-down Fired when drill down is triggered e, chart, component
    drill-up Fired when drill up is triggered e, chart, component
    drill-up-all In a chart with multiple drilldown series, this event fires after all the series have been drilled up e, chart, component
    selection Fired when a range of points are selected e, chart, component
    redraw Fires when the chart is redrawn e, chart, component
    render Fires after initial load of the chart, and after each redraw e, chart, component


    Mixin Description
    --highcharts-min-height Min Height for Highcharts-Chart container [default: 26em]
    --highcharts-container The container that directly contains the Chart SVG


    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


    MIT License © Apoorv Verma





    npm i highcharts-chart

    DownloadsWeekly Downloads






    Unpacked Size

    29.4 kB

    Total Files


    Last publish


    • avdaredevil