Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overlapping Y Axis in a Multi y axis Highchart

i am trying to add a multiple yaxis highstock. The plotting works fine but the axis labels are overlapping & overall giving it a clumsy look. here is a snapshot of it! Highchart Multi-Y

I have used this example for creating a multi y chart.

Can You help?

These are the formatting options i am using currently

var options = {};
options.xAxis = {
        labels : {
            enabled : true
        }

    };
    options.title = {
        text : "Highchart",
        style: {
            fontSize: '14px',
            fontWeight: '800'
        }
    };
    options.subtitle = {
        text : ""
    };
    options.chart = {

        borderColor : '#BBBBBB',
        borderWidth : 0,
        borderRadius : 20,
        zoomType : 'xy'
    };
//  options.yAxis={min:0};
    options.yAxis=[{ // Transaction Count_URL
        labels: {
            formatter: function() {
                var value= this.value;

                if(value>=1000000000)
                    ret = (value / 1000000000) + 'G'
                else if(value>=1000000)
                    ret = (value / 1000000) + 'M';
                else if(value>=1000)
                    ret = (value / 1000) + 'k';
                else
                    ret=value;

                return ret;
            },
            style: {
                color: '#89A54E'
            }
        },
        title: {
            text: 'Memory Used',
            style: {
                color: '#89A54E'
            }
        },
        opposite: true

    }, { // Transaction count_EXEC
        gridLineWidth: 0,
        title: {
            text: 'GC Count',
            style: {
                color: '#4572A7'
            }
        },
        labels: {
            formatter: function() {
                return this.value;
            },
            style: {
                color: '#4572A7'
            }
        }

    }, { // Tertiary yAxis
        gridLineWidth: 0,
        title: {
            text: 'TPS',
            style: {
                color: '#AA4643'
            }
        },
        labels: {
            formatter: function() {
                return this.value;
            },
            style: {
                color: '#AA4643'
            }
        },
        opposite: true
    }],

    options.navigator=
    {
        enabled: false
    };

    options.credits = {
        enabled : false
    };

    options.xAxis = {
        type : 'datetime'
    };
    options.series = [];



    options.rangeSelector = {
        enabled : false
    };
    options.series=[];

    options.tooltip = {
        shared : false,
        snap : 0

    };
    options.scrollbar = {
        enabled : false
    };
    options.navigation = {
        buttonOptions : {
            enabled : false
        }
    };
like image 534
petarap Avatar asked Oct 22 '22 10:10

petarap


1 Answers

You can set offset parametr for yAxis http://api.highcharts.com/highcharts#yAxis.offset

like image 105
Sebastian Bochan Avatar answered Oct 27 '22 20:10

Sebastian Bochan