Style highcharts x and y axis

By : Denees
Source: Stackoverflow.com
Question!

I am stuck on a problem and cannot find how to move further. I am trying to style up a chart using highcharts. But cannot get to show up the right percent values on the left side and style up the bottom and left lines a little so they will look like in first screen. The same problem I have with the tick under bottom labels, they seems like they cannot be moved to top so they will overlay the bottom line on the middle.

This is how it must be:

enter image description here

This is what I've made so far:

enter image description here

Here is how my code looks: http://jsfiddle.net/8Wp7k/

And highcharts settings:

$j('.investor-calculator .chart-container .chart').highcharts({
    title: {
        text: '',
        x: -20 /*center*/
    },
    background: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, 'rgb(96, 96, 96)'],
            [1, 'rgb(16, 16, 16)']
        ]
    },
    subtitle: {
        text: '',
        x: -20
    },
    xAxis: {
        categories: ['???', '???', '???', '???', '???', '???'],
        tickmarkPlacement: 'on',
        tickColor: '#d2d2d2',
        gridLineColor: '#eee',
        tick: false
    },
    yAxis: {
        title: null,
        tickPosition: 'inside',
        gridLineDashStyle: 'longdash',
        lineColor: '#d2d2d2',
        lineWidth: 1
    },
    tooltip: {
        valueSuffix: null
    },
    series: [{
        name: 'Some Name',
        data: [1.0, 6.9, 2.5, 8.5, 1.0, 12.5]
    }],
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    colors: ['#e0502f'],
    plotOptions: {
        series: {
            lineWidth: 4,
            marker: {
                enabled: false
            }
        }
    }
});
By : Denees


Answers
To move your x-axis labels, add something like this to the x-axis:

 labels:{
        y:25
 }

For the y-axis, you can force the tick interval to be every 5%, and format the labels like this:

    tickInterval: 5,
    labels: {
        format: '{value} %'
    }

http://jsfiddle.net/Kd5k7/

A few more tweaks:

You can move the axis positions using offset e.g.:

 yAxis: {
        min:-4,
        startOnTick:false,
        offset:-20

The min and startOnTick forces the y-axis to start at -4, but won't print a label, as the min is not a multiple if 5.

http://jsfiddle.net/P9M3t/

By : SteveP


For the Y Axis labels, you need to use:

        labels: {
            format: '{value} %'
        },
        tickInterval: 5

Fiddle

For the tick position, you're limited to 'inside' or 'outside, per the documentation, they cannot straddle the x-axis.

As for the Axes crossover, Steve P has the answer to this

By : SW4


This video can help you solving your question :)
By: admin