CODEWITHSUNDEEP
javascriptchartshighcharts
Kristian Vitozev
Kristian Vitozev

Reputation: 5971

Highcharts - prevent pie chart from overlaping a line chart?

I have two-in-one charts, as you can see here:

http://jsfiddle.net/8ankuh8s/

$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        tickInterval: 1,
        tickmarkPlacement: "on",
        startOnTick: true,
        endOnTick: true,
        minPadding: 0,
        maxPadding: 0,
        offset: 0
    },

    series: [{
        data: [190.9, 180.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        type: 'pie',
        data: [29.9, 71.5, 150],
        center: [50, 40],
        dataLabels: {
            enabled: false
        },
        size: 100
    }]
});

});

You'll see that pie chart overlaps the line chart.

I want to achieve the following result (mock):

enter image description here

I tried to do this with offset parameter on xAxis, but it's not working as expected.

Upvotes: 0

Views: 77

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that in case of your chart you can use xAxis.min and xAxis.tickPositioner. You can find information about them inside API: http://api.highcharts.com/highcharts#xAxis.min http://api.highcharts.com/highcharts#xAxis.tickPositioner

You can use them to move your categories on your xAxis. Here you can find code that can help you:

    xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  tickmarkPlacement: "on",
  minPadding: 0,
  maxPadding: 0,
  min: -5,
  tickPositioner: function() {
    var positions = [];
    for (var i = 0; i < this.categories.length; i++) {
      positions.push(i)
    }
    return positions
  }
},

With this function I will show only your categories on xAxis, but they will be shifted with xAxis.min parameter.

Here you can find an example how it can work: http://jsfiddle.net/8ankuh8s/2/

Best regards.

Upvotes: 2

Related Questions