Combination charts - Word chart with bar chart

Question

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

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.

score 1 · Accepted Answer · answered Jun 03 '19 at 12:05

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

But if you see it in full screen, the chart is displayed side by side, !! Any solution for that ? — Vikhyath Maiya, Jun 04 '19 at 11:17
Hi @Vikhyath Maiya, I wanted to show you the general concept. You need to change the calculations a bit and CSS styles. Please check the following example: http://jsfiddle.net/BlackLabel/8vna4peu/ — ppotaczek, Jun 05 '19 at 10:11

Combination charts - Word chart with bar chart

1 Answers1