4

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
            }
        }
    }
});
1

2 Answers 2

3

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

2
  • 1
    Axis crossover is possible using 'offset' (see my update). jsfiddle.net/P9M3t
    – SteveP
    Dec 12, 2013 at 10:55
  • Good shout, didnt realise
    – SW4
    Dec 12, 2013 at 10:59
2

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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.