Altitude charts style x and y

I am stuck in a problem and cannot find how to move on. I am trying to create a chart using tall charts. But I can’t get the correct percentage values ​​on the left side and stylize the bottom and left lines a bit so that they look on the first screen. The same problem as the checkmark under the bottom marks, it seems that they cannot be moved to the top, so they will overlap the bottom line in the middle.

Here's how it should be:

enter image description here

This is what I have done so far:

enter image description here

This is what my code looks like: http://jsfiddle.net/8Wp7k/

And graphics card 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
            }
        }
    }
});
+4
source share
2 answers

X, - x:

 labels:{
        y:25
 }

y 5% :

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

http://jsfiddle.net/Kd5k7/

:

, :

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

Min startOnTick y -4, , min , 5.

http://jsfiddle.net/P9M3t/

+2

Y :

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

Fiddle

"" "", , x.

Axes, P

+3

All Articles