HighCharts examples

[3goats]

Hi,

I would like to use the HighCharts libraries with lightning. Would it be possible to provide some examples of how to achieve this.

Thanks.

[mathisonian]

Hey @carlskii!

The approach I would take is the following. Create a custom visualization locally using the generator. Then fill in the following functions with high-charts specific code:

var LightningVisualization = require('lightning-visualization');

var LightningHighchart = LightningVisualization.extend({

    init: function() {
        this.render();
    },

    render: function() {
        // instantiate the high chart here.
        // you have access to "this.el" or "this.selector" for dealing with the DOM
        // and you have access to this.data, the data that should actually be rendered.
    },

    formatData: function(data) {
         // transform data if necessary. This is called before init and is called on the data passed to update data and appendData
    },

    updateData: function(formattedData) {
         // if you want the chart to have the ability to update fill in this function
         // this will involve updating the highchart that was created in the render function somehow
    },

    appendData: function(formattedData) {
        // same idea as updateData but appending instead of replacing it
    }

});


module.exports = LightningHighchart;

If you have questions about more specific details or get stuck anywhere along the way, feel free to post them here, we're happy to help.