Post
Ask Question

Create a Combo Chart and Make Your Chart Draggable

Introduction

Hi all, this article explains how to create a Combo chart. As you all know, the word combo is short for combination; in this case, it is a combination of chart types. Which means we can have multiple chart types in one chart.

Background

For the past few months, I have been working on a dashboard application, so I encountered a situation where I had to work with a Combo chart in my application. As I began working with the Combo chart, when I finished the work, I got a new requirement that a Pie chart must be draggable in the chart area. So I thought of working on that and share it with you all.

What do we need first?

Include the necessary JavaScript files and UI elements as follows.

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
<div id="container2" 
     style="width: 150px; height: 150px; margin: 0 auto; 
            position: absolute; top: 120px; left: 150px;">
</div>

Combo chart configuration

Our next step is to configure the Combo chart. You can determine the configuration here.

$(function() {
    $('#container').highcharts({
        title: {
            text: 'Worked hours in a week'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        series: [{
            type: 'column',
            name: 'Monday',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'Tuesday',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Wednesday',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'column',
            name: 'Thursday',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'column',
            name: 'Friday',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'spline',
            name: 'Thursday',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }]
    });
    $('#container2').highcharts({
        chart: {
            backgroundColor: 'rgba(0,0,0,0)'
        },
        title: {
            text: null
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            type: 'pie',
            name: 'Total',
            data: [{
                name: 'Monday',
                y: 13,
                color: Highcharts.getOptions().colors[0]
            }, {
                name: 'Tuesday',
                y: 23,
                color: Highcharts.getOptions().colors[1]
            }, {
                name: 'Wednesday',
                y: 19,
                color: Highcharts.getOptions().colors[2]
            }, {
                name: 'Thursday',
                y: 19,
                color: Highcharts.getOptions().colors[2]
            }, {
                name: 'Friday',
                y: 19,
                color: Highcharts.getOptions().colors[2]
            }],
            size: 90,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
    $("#container2").draggable();
});

Please note that I have given the Pie chart as a separate chart so that we can make it draggable as follows.

$("#container2").draggable();

You can determine the demo here: http://jsfiddle.net/sibeeshvenu/oc1mn8ru/4/

Output

Now, if you run this configuration, you will get output as follows.

Output

Now, the interesting fact is you can drag the pie to wherever you want it.

Output

Conclusion

I hope you liked this article. Now, please share your thoughts and suggestions. It matters a lot.

Kindest Regards


Similar Articles