CODEWITHSUNDEEP
jqueryhighcharts
Praful Bagai
Praful Bagai

Reputation: 17402

HighCharts Combination Chart

I'm using combination charts in highcharts JSFiddle. Above a certain point the pie chart comes in the way of line chart and hinder its visibility.

How can I push the pie chart up/down dynamically based upon the value of line chart.

Here is my highcharts code.

$(function () {
        $('#container').highcharts({
            chart: {
            },
            title: {
                text: 'Combination chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
            },
            tooltip: {
                formatter: function() {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = ''+
                            this.point.name +': '+ this.y +' fruits';
                    } else {
                        s = ''+
                            this.x  +': '+ this.y;
                    }
                    return s;
                }
            },
            labels: {
                items: [{
                    html: 'Total fruit consumption',
                    style: {
                        left: '40px',
                        top: '8px',
                        color: 'black'
                    }
                }]
            },
            series: [{
                type: 'spline',
                name: 'Average',
                data: [3, 6, 3, 6.33, 3.33],
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }, {
                type: 'pie',
                name: 'Total consumption',
                data: [{
                    name: 'Jane',
                    y: 13,
                    color: Highcharts.getOptions().colors[0] // Jane's color
                }, {
                    name: 'John',
                    y: 23,
                    color: Highcharts.getOptions().colors[1] // John's color
                }, {
                    name: 'Joe',
                    y: 19,
                    color: Highcharts.getOptions().colors[2] // Joe's color
                }],
                center: [100, 80],
                size: 100,
                showInLegend: false,
                dataLabels: {
                    enabled: false
                }
            }]
        });
    });

I want somthing like this. You see pie chart and spline are not clashing. But in my case, the value of spline being high, the pie chart hinders the visibility of spline. Pie chart should automatically adjust itself somewhere above or below the spline.

How can I do this?

Upvotes: 2

Views: 1897

Answers (1)

SteveP
SteveP

Reputation: 19103

I don't think there is an automatic way. You may have to add some logic to set the center and size parameters of the chart depending on the data being plotted.

Another way is to extend the y axis to make room. You can calculate this based on the max value being plotted plus enough space for the pie chart:

 yAxis: {
            max:10
        },

http://jsfiddle.net/Y7GMr/

Upvotes: 1

Related Questions