javascripthighchartshighcharts-ngangular2-highcharts

Combination charts - Word chart with bar chart

I am using highcharts for one of my projects and I want to know if it is possible to have a combination chart of bar chart and word cloud chart. Something like shown below

enter image description here

Is it possible to achieve this or is there any open source chart libraries which do this.

What I have tried:

I have looked for all the available chart libraries and did not find any suitable options. Since its the starting point, there is nothing much to be specified.

Please help. I am stuck.

Solution

  • You need to create and add separate containers with wordcloud charts:

    chart: {
    events: {
        load: function() {
            var points = this.series[0].points;

            points.forEach(function(p) {
                var wContainer = $('<div>');

                wContainer.addClass('wordCloudContainer');

                wContainer.css({
                    top: this.plotTop,
                    left: p.plotX
                });

                $('#mainContainer').append(wContainer);

                Highcharts.chart(wContainer[0], {
                    chart: {
                        width: p.pointWidth + 40,
                        height: 200
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        type: 'wordcloud',
                        data: [
                            ['one', 1],
                            ['two', 2],
                            ['three', 3]
                        ]
                    }]
                });
            }, this);
        }
    }
}

    Live demo: http://jsfiddle.net/BlackLabel/2jahsfyp/

    API Reference: https://api.highcharts.com/highcharts/chart.events.load