I am using highcharts-chart" with lit-element:
"highcharts": "^7.1.2",
"highcharts-chart": "^3.0.1",

import 'highcharts-chart/highcharts-chart';
<highcharts-chart id="chart" type="pie" .data="${this.data}"
selected-points="${this.selectedPoints}"
title='${this.title}' x-zoom x-label="" y-label="" color-by-point="true" legend="true">

But getting the error :
highcharts-behavior.js:5 Uncaught ReferenceError: Highcharts is not defined
at Module.rv95 (highcharts-behavior.js:5)
at webpack_require (bootstrap:785)
at fn (bootstrap:150)
at Module.iJsM (highcharts-chart.js:1)
at webpack_require (bootstrap:785)
at fn (bootstrap:150)
at Module.LB6A (selectable-pie-chart.js:1)
at webpack_require (bootstrap:785)
at fn (bootstrap:150)
at Module.4g6G (infrastr-grid-filter.js:1)

Hi there,

I am trying out this nice web component and everything worked fine until the highcharts module pulled via bower updated the patch level from 5.0.9 to 5.0.14.

I put together two examples to show this behavior:
https://github.com/hadjian/highcharts-chart-broken-with-5.0.14
https://github.com/hadjian/highcharts-chart-working-with-5.0.9

The one, that is working explicitly pulls highcharts version 5.0.9 in bower.json. Both projects are based on the polymer starter example and include the highcharts-chart component via src/polytest-app/polytest-app.html. Including the component directly in index.html seems to work in both cases. Apologies in advance, if I made some newcomer mistake.

Regards,

Pedram

Cannot get chart to render in IE11 including the demo site ones https://avdaredevil.github.io/highcharts-chart/

is there a way to specify the height of a graph? I want to stack four spline charts vertically in the viewport and have them be relatively sized 25%. I'm using iron-flex-layout for the structure but the graphs are overflowing their containers.

• New Methods if needed
• Update existing API's to work with new binding
  • Zoom Updates
• Update old forms of binding
• Fix Bugs

Hi,

I am using polymer version #1.9 - 2. and i have installed highcharts-chart using command below
bower i highcharts-chart#polymer-1.0
and i have imported the highcharts component and used like below

when i inspect the svg conent is not getting loaded inside highcharts-chart component.

</highcharts-chart>

Could you please help in resolving this issue.

Hi,
I'm trying to use the annotation as shown here

I really don't know how to include them in your code, any tips?

Have the following support in Highcharts-Behavior:

• plotOptions link to plot options
• chartOptions link to chart options

Is there a way to render the Highcharts word cloud in Polymer?

Hi,
Thanks for having created this component !
I am planning to use it in my Polymer 2.x project.
I can initiate an upgrade to polymer 2.x but just wondering if you could create a branch for that (because it is going to be a full Polymer 2.x upgrade not hybrid).
Please let me know what your thoughts are on this.

Hi, thanks for providing this component. Saved me a lot of time.

Is the height-responsive attribute supposed to mean to expand the chart to its container? If so I can't seem to get it to work.

I tried:

<div style="height:1000px">
   <highcharts-chart height-responsive data="[1,2,3]"></highcharts-chart>
</div>

And so I would expect to see a chart of height 1000px but I'm not.

Have I misunderstood what this attribute is for?

Many thanks.

I created some charts, very nice element btw, but i'm not able to create a gauge, could you please give me some infos?

Hello,

Sooo, I am using this very cool component in an application using electron+polymer which reads real time data from a microcontroller, via serial port.

All is good, however I have had some trouble shifting the plotted data as the new data is read. (See pic)

Now, my problem is that I cannot find a way to control the (xmin,xmax) but using reRender(), the documentation in highcharts has an example using a function for the Axis called setExtremes, which I have not been able to find in this component.

What I do is to fill in an array with data and after a number has been reached push - shift - reRender, but I was wondering if there is some other way of doing so which would allow more binding and customisation on the fly?

This is the markup of the element and the properties:

<div id="hccontainer">
    <highcharts-chart id="hcplot"
    type="line"
    plot-options=[[plotOptions]]
    title="Sensor A0 time-series"
    x-axis=[[xoptions]]
    y-axis=[[yoptions]]
    ></highcharts-chart>
   </div>

The options which are kind of irrelevant:

        xoptions:{
          type: Object,
          value:{
            //min: 0,
            maxPadding: 0.05,
            minPadding: 0.05,
            //hendOnTick: false,
            //tickAmount: 10,
            //type: 'datetime',
            //tickPixelInterval: 150,
            //maxZoom: 20 * 1000
          },
          notify:true,
        },

        yoptions:{
          type: Object,
          value:{
            min: -1.0,
            max: 5.5,
            tickAmount: 8,
          },
          notify: true,
        },

        plotOptions:{
          type:Object,
          value:{
                  line: {
                    marker: {
                       enabled: false,
                    }
                 }
               },
        },

here is my plot function:

`
plotdata: function(){

    if ((this.sensor)&&(this.sensor.instance)){
    _this=this
    this.sensor.instance.scale(0,5).on('data', function(){
    if (_this.drawswitch==true){
        _this.tseries.push([_this.pltindex*(_this.freq/1000.0),_this.sensor.instance.value])
        if(_this.pltindex>100){
        _this.tseries.shift()
        }
        if (_this.pltindex%2==0){
        _this.$.hcplot.reRender()
        _this.$.hcplot.setData(_this.tseries)
        }
        _this.pltindex++
      }
    })
   }
  },

`
I would really appreciate any suggestion to have some more control over the real time updates which i would like to be able to manipulate from the gui somehow.

Thanks,

Hi,

I ve got a problem with x axis zoom. When i set data dynamically in the chart and i clicked on the "All" button, after 2-3 minutes the selection in the zoom time panel decreases step by step.

Do you have a solution?
Thanks

Overriding default options seems counterintuitive.

Consider people moving from using Highcharts directly to using this element. They will copy-paste their configuration and expect the chart to look the same, since it is the same configuration. However, they will now have to hunt down the options that have been overwritten, both in the documentation of this element (to find out what has been overwritten) and in Highcharts' documentation, to figure out what was the original default value.

This also make it difficult for people which are already familiar with the Highcharts API, since they are familiar with the default values, and will have to go through the same process.

A really unintuitive example is the legend: it is vertical by default, in contrast to horizontal in Highcharts. Setting legend-position to { align: 'center', verticalAlign: 'bottom', layout: 'horizontal' } is not enough, since we also have to set legend-pos to { x: 0, y: 0 }.

Hey there,

i've an issue when trying to render highcharts inside a // .

It doesn't render the chart at all (not to mention that it doesn't get the items inside the data-attribute).

Snippet:

<div class="card card--1-5 text-center animated fadeInUp">
    <div class="card__chart">
        <highcharts-chart
                index$="[[index]]"
                id$="[[index]]"
                style="min-height: auto;"
                type='pie'
                tooltip-options='{"enabled":false}'
                color-by-point='true'
                highchart-options='{"chart":{"height":"150px"},"plotOptions":{"pie":{"colors":["#2f84e5","#f5f8fb"],"dataLabels":{"enabled":false},"innerSize":"80%","center":["50%","50%"]}}}'
                chart-options='{"backgroundColor": null}'
                data='[50,50]'
                title=''>
        </highcharts-chart>
    </div>
</div>                                

Do you have any idea how to debug this one or fix it?
It works fine when it's not inside another template-tag..

Hello,
This is a dull question but I have been trying to make the xAxis option to work (just adding a vertical line to a line chart) without success so far.

I am really stuck with this and I will appreciate any help. The plot is fine, it just dont show the vertical marker at all.

Thanks.

Use case: After doing bower install, it is common to expect that everything that is needed to run the application is installed in bower_components.

Behavior: Highcharts is loaded directly from their website.

Expected behavior: Should be installed via bower.

How do you feel about this? I could do a pull request if it's alright with you.

I am trying to use multiple yAxes for my chart. Usually in high charts I would use an array with multiple yAxis objects inside. In your docs it looks like that attribute is not meant for arrays.

I have my chart set up like this:

<highcharts-chart type="spline" data='{{chartData.series}}' title='Test' xAxis='{{chartData.xAxis}}' yAxis='{{chartData.yAxis}}'></highcharts-chart>

And my chartData object:

chartData = { series: [{}], xAxis: {title: {text: "X Axis"} }, yAxis: [ {title: {text: "Y Axis 1"} }, {title: {text: "Y Axis 2"}, opposite: true } ] }
I do not see an xAxis or yAxis title.

I tried using the same code on the demo of your webcomponents page (here's a screenshot), but it didn't seem to work there either.

Can you tell me if I'm doing something wrong or if this is a bug?

Great job on the web component by the way!

Thanks!

How to use multiple series data? I tried to use the addSeries function but it wouldn't recognize it.
Also, what dependencies have to be added if RequireJS is being used?

It's possible to use in angular 4 app?