The component and theme mixin

Private and public APIs

The component defines three properties as APIs – content, which refers to series data in a form that Highcharts expects, chartOptions, a POJO that defines options for Highcharts (see API) and chart, a private property that holds the actual Highchart object so that we can refer to it within the component.

didInsertElement

When the component’s didInsertElement hook fires, we call two methods: drawLater(), and buildTheme().

buildTheme() is a method from the Highcharts theme mixin that simply applies theme options to the Highchart object. drawLater() runs the draw() method once in the afterRender queue in the Ember run loop, which makes sure the DOM elements are rendered before we attempt to wire up our Highchart.

Setting Highcharts options

In the method buildOptions, we add a default data series to be displayed if no content ends up being passed into the component. You could very easily set this up to include your own global Highcharts options.

Binding live data changes to the Highchart

With contentDidChange, we set up an Ember observer on the content that’s been passed into the component. We make use of a handy Highcharts API method that lets us update the data for a series (without redrawing the entire chart), so that the chart doesn’t trash the DOM by re-rendering multiple times when data changes. This is all you need to do to get data live binding into Highcharts!

Teardowns

Finally, for performance issues, we want to teardown and destroy the chart when the component is destroyed. This is easily achieved with the Ember lifecycle hook willDestroyElement, which fires when the component is about to be destroyed (but not yet).

Using the component in your templates

Using the Highcharts component is as simple as: