Different Y axes in Highcharts

Question

Different Y axes in Highcharts

Navigation

#1 by (1 votes)

1

I have a comparative chart that has two Y-axes with different values, which compromises the comparison. I would like both axes to have the same value, how could I solve this problem?

Follow the chart:

<script type="text/javascript">
    Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'comparativo'
        },
        subtitle: {
            text: 'area'
        },
        xAxis: [{
            categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dec'],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value} ',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Realizado',
            type: 'column',
            yAxis: 1,
            data: [<?php echo $rowrj['RealJan'];?>,<?php echo $rowrf['RealFev'];?>,<?php echo $rowrm['RealMar'];?>,<?php echo $rowra['RealAbr'];?>,<?php echo $rowrma['RealMai'];?>,<?php echo $rowrjun['RealJun'];?>,<?php echo $rowrjul['RealJul'];?>,<?php echo $rowrago['RealAgo'];?>,<?php echo $rowrs['RealSet'];?>,<?php echo $rowro['RealOut'];?>,<?php echo $rowrn['RealNov'];?>,<?php echo $rowrd['RealDez'];?>], 
            tooltip: {
                valueSuffix: ' '
            }

        }, {
            name: 'Previsto',
            type: 'spline',
            //Se colocar o Yaxix aqui, fica uma coluna só de eixo Y 
            data: [<?php echo $rowpj['PrevJan'];?>,<?php echo $rowpf['PrevFev']?>,<?php echo $rowpm['PrevMar']?>,<?php echo $rowpa['PrevAbr']?>,<?php echo $rowpma['PrevMai']?>,<?php echo $rowpjun['PrevJun']?>,<?php echo $rowpjul['PrevJul']?>,<?php echo $rowpago['PrevAgo']?>,<?php echo $rowps['PrevSet']?>,<?php echo $rowpo['PrevOut']?>,<?php echo $rowpn['PrevNov']?>,<?php echo $rowpd['PrevDez']?>],
            tooltip: {
                valueSuffix: ''
            }
        }]
    });
</script>

javascript highcharts

asked by anonymous 06.10.2017 / 15:56

1 answer

Leave only letters and numbers of a cookie undefined reference to 'Test_1 :: Test_1

score 1 · Accepted Answer

You can implement a default value of the range between the Y-axis values:

yAxis: {
     tickInterval: 10
}

In your case, just use all the code referring to the Y axis and implement the excerpt by changing it to the desired value tickInterval: valor .

    yAxis: [{ // Primary yAxis
        min: 10,
        tickInterval: 10,
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: '',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
    },{ 
            min: 10,
        tickInterval: 10,// Secondary yAxis
        title: {
            text: '',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true,
    }],

In this way I believe to standardize both sides simultaneously.