CODEWITHSUNDEEP
javascriptjqueryhighcharts
oOnez
oOnez

Reputation: 887

HighCharts : Polar chart not stretched in its frame

I want to display a small polar chart on my web site.

But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.

Please, have a look on this jsfiddle to understand the problem : http://jsfiddle.net/7zmT9/

Is it possible to force the frame to fit the chart? or to reduce the step value?

Here is my code :

$(function () {

$('#container').highcharts({

    chart: {
        polar: true,
         height: 252,
         width: 262
    },
    pane:{
      size: '100%',
  },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 45,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },

    yAxis: {
        min: 0
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },

    series: [{
        type: 'column',
        name: 'Column',
        data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
        pointPlacement: 'between'
    }, {
        type: 'line',
        name: 'Line',
        data: [1, 2, 3, 4, 5, 6, 7, 8]
    }, {
        type: 'area',
        name: 'Area',
        data: [1, 8, 2, 7, 3, 6, 4, 5]
    }]
});
});

Upvotes: 0

Views: 721

Answers (2)

Fizor
Fizor

Reputation: 1530

You can indeed set the step, but I am not 100% sure if this is what you are looking for.

On your yAxis you can set the tickInterval

yAxis: {
    min: 0,
    tickInterval: 2 //change this value to suit your needs
},

I have updated your Fiddle. Is that what you are after?

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/

    yAxis: {
        min: 0,
        maxPadding: 0
    },

Upvotes: 1

Related Questions