Vaadin Charts Category naming with polymer

I am attempting to make a chart which has categories that are set by an array returned from JSON data. If I bind the x categories to a categories property, like so:
the chart will use my custom categories property to initialize the chart. However, when I change the categories property using custom JS, the categories on the chart do not update. Does anyone know how I could solve this?

Hi Christopher,

Could be that the charts don’t observe light DOM changes automatically so you ca try invoking

chart.reloadConfiguration() after changing the value to make it update.

is that a method in the JavaScript API for charts? I tried to implement what you said like so:

this.$.chartOne.chart.reloadConfiguration(); and I get an error that says reloadConfiguration is not a function. Is this the correct way to call a method on chart?

The reloadConfiguration() should be invoked on the chart directly. Like for example if this.$.chartOne was a reference to a element, you could use this.$.chartOne.reloadConfiguration() to refresh it.

Thanks so much! This fixed my issue that had been giving me way too much of a headache. The reason I thought you had to use this.$.chartId.chart is because of the way one of the guides on here explains how to update data points using this.$.chartName.chart.series[0] .addPoint(pointData); I figured to apply functions to the chart you would have to use .chart

I had another related question. Is there another way to refresh the view of the chart without reloadConfiguration? my charts are becoming unformatted by the switch into view using iron pages so I was wondering if there is a way to just redraw the chart. I’ve tried this.$.chartOne.redraw(), this.$.chartOne.chart.redraw(), this.$.chartOne.drawChart() all to no avail. I’m probably missing something simple but I’m not sure what it is. please let me know.

I guess this is discussed here!/thread/13695478/13714466