t3hb055
Posts: 2
Joined: Mon Aug 10, 2015 7:45 pm

Highcharts Axis ignoring min/max, and setExtremes [SOLVED]

Wed Aug 19, 2015 9:54 pm

I have a stacked column chart that is supposed to have a yAxis range from (0, 100) and a yAxis[1] range of the same. However, I set this in the chart itself but It gets ignored by the chart. And when drawn both Axis go from 0, 150. I tried setting the extremes of the charts below it and it doesn't change anything. I then used the getExtremes call to see what they were and it returned with:

Code: Select all

{"min":0,"max":150,"dataMin":0,"dataMax":100,"userMin":0,"userMax":100}
No matter what I do or specify I can't seem to change the normal min or max.

This error only seems to be occurring in Internet Explorer on my side.

I use an AJAX call to propogate the data object. It looks like this:

Code: Select all

{"Satisfaction":[[124],[63],[117]],"Average":[101],"Legend":["Q3 2015"], "SummaryData":[124,63,117],"AxisNames":["low","medium","high"]}
Example Code:

Code: Select all

$('#satisfactionDiv').highcharts({

                    chart: {
                        type: 'column'
                    },
                    exporting: {
                        buttons: {
                            pieChartButton: {
                                symbol: 'url(../Images/fi-graph-pie-small.png)',
                                //text: '@Html.Raw(Resource.GetString("Pie"))',
                                _titleKey: 'convertToPie',
                                onclick: function () {
                                    setTimeout(
                                        function () { DrawPieChart($('#satisfactionDiv'), pieObject, drawSatisfactionChart) }
                                        , 200);
                                }
                            }
                        }
                    },
                    title: {
                        text: '@Html.Raw(Resource.GetString("Satisfaction"))'
                    },
                    xAxis: {
                        categories: data.Legend,

                        crosshair: true
                    },
                    yAxis: [{
                        min: 0,
                        max: 100,
                        title: {
                            text: '@Html.Raw(Resource.GetString("# of responses"))'
                            
                        },
                        endOnTick: false,
                        tickInterval: 25
                    }, {
                        min: 0,
                        max: 100,
                        title: {
                            text: '@Html.Raw(Resource.GetString("Average"))',
                    },
                        opposite: true,
                        endOnTick: false,
                        tickInterval: 25
                    }],
                    tooltip: {
                        pointFormat: '<br /><span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.02f}%</b>',
                        headerFormat: '<span style="font-size:14px">{point.key}</span><table>',
                        //pointFormat: s,
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            stacking: 'percent',
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        type: 'column',
                        name: [data.AxisNames[0]],
                        data: data.Satisfaction[0],
                        yAxis: 0


                    }, {
                        type: 'column',
                        name: [data.AxisNames[1]],
                        data: data.Satisfaction[1],
                        yAxis: 0

                    }, {
                        type: 'column',
                        name: [data.AxisNames[2]],
                        data: data.Satisfaction[2],
                        yAxis: 0

                    }, {
                        enableMouseTracking: false,
                        type: 'spline',
                        name: 'Average', //change me later
                        data: data.Average,
                        yAxis: 1
                    }
                    ],
                    credits: {
                        enabled: false
                    }
                });
                var chart2 = $("#satisfactionDiv").highcharts();
                
                chart2.yAxis[0].setExtremes(0, 100, true, false);
                chart2.yAxis[1].setExtremes(0, 100, true, false);

                alert(JSON.stringify(chart2.yAxis[0].getExtremes()));
            }
I threw all of this in a fiddle and for some reason it works, I have no idea what the difference is between them currently.
I filled the jsfiddle based off some actual sample data at runtime.
http://jsfiddle.net/znphwkq5/2/

There are five other charts in the view, one of which is another stacked column that has specific max/min and works. Would any of these effect it? None of a range of 150.

Thanks!

This has been resolved! I changed the alignTicks: false in the chart settings.

Return to “Highcharts Usage”