Different Y axes in Highcharts

Asked

Viewed 513 times

1

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

Follows the graph:

<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>

inserir a descrição da imagem aqui

1 answer

1


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

yAxis: {
     tickInterval: 10
}

In your case just use all the code referring to the Y axis and implement the chunk changing 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.

  • So when I tried the chart it was gone

  • I did the implementation of your code, where it implements two Y axes in the most current version of the highcharts api, automatically it brought me the values of the standard axis, it was not necessary for me to use the tickInterval. Which version you are using?

  • Can I copy the y-axis part of my code and edit the answer? I don’t know if I put it exactly where I should.

  • 1

    I edited my reply with the excerpt.

  • Then the chart went missing again. I’m using this: <!--Highchart-->&#xA;<script src="../../code/highcharts.js"></script>&#xA;<script src="../../code/modules/exporting.js"></script>

  • Highcharts 5.0.14

  • 1

    I edited my answer again!

  • It worked, thank you.

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.