Home > OS >  Highchart proportion is wrong when I use yaxis type is "logarithmic"
Highchart proportion is wrong when I use yaxis type is "logarithmic"

Time:10-05

I'm using highchart in angularjs app. I'm using Highcharts JS v7.2.1 (2019-10-31). When I use "type:'logarithmic'" for yaxis it will render wrong proportion bars. Without that "logarithmic" it will render correctly but I need to display too small value as well. please give me some solution to render chart in correct proportion

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: ['A','B','C','D','E','F','G','H'],
        title: {
            text: null
        }
    },
    yAxis: {
        type: 'logarithmic',
        title: {
            text: null,
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.x   ':'   this.y   ' millions';
        }
    },
    plotOptions: {
       column: {
                                    stacking: 'normal',
                                    dataLabels: {
                                        enabled: true,
                                        style: {
                                            textShadow: false,
                                            'textOutline': '0px',
                                            'stroke-width': 0,
                                            fontSize: '14px'
                                        }
                                    }
                                },
                                series: {
                                    pointPadding: 0,
                                    groupPadding: 0.1,
                                    borderWidth: 0,
                                    shadow: false,
                                }
    },
    credits: {
        enabled: false
    },
    series: [{
    "name": "Current Pillar Value",
    "data": [
        15216429,
        842869,
        773956,
        16833254
    ],
    "type": "column",
    "color": "#0fb2fc",
    "showInLegend": false
},
{
    "name": "Previous Pillar Value",
    "data": [
        null,
        15216429,
        16059298,
        null
    ],
    "type": "column",
    "color": "#d3c9c9",
    "dataLabels": {
        "enabled": false
    },
    "showInLegend": false
}],

});
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px"></div>

CodePudding user response:

Use yAxis.tickInterval to change interval on your yAxis.

On logarithmic axes, the tickInterval is based on powers, so a tickInterval of 1 means one tick on each of 0.1, 1, 10, 100 etc. A tickInterval of 2 means a tick of 0.1, 10, 1000 etc. A tickInterval of 0.2 puts a tick on 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 etc.

https://api.highcharts.com/highcharts/yAxis.tickInterval

  • Related