CODEWITHSUNDEEP
javascriptgraphicshighcharts
Dmytro Filipenko
Dmytro Filipenko

Reputation: 941

Graphics start from axis + grid line

I'm working on customization highcharts and i had some problem with http://jsfiddle.net/gF4x2/ this graphic

credits: {
    enabled: false
},

I think, some issue are easy, some not. Maybe someone encounter with the same problems and have resolved it.

  1. Need that graphics start from y and x axis, now they are have padding and i dont know how to remove it.

  2. I need to create some sort of this grid, but on my graphics i couldn't. i even dont know in what side i should look to get this. Maybe some one know decision or can give advice what i should do?

Chart grid

Upvotes: 0

Views: 154

Answers (2)

SteveP
SteveP

Reputation: 19103

I can help a bit with the grid. You can use these options in your x-axis:

 gridLineWidth:1,
    plotBands:[
        {color:'lightgrey',from:0,to:3},
        {color:'lightgrey',from:9,to:11}
   ],

http://jsfiddle.net/YabxW/

I've looked at this a bit more, and you can get closer to what you want using plotBands and the help that Ivan Chau has suggested. However, I would consider plotting this as two charts instead of one, as it's very hard to get exactly what you want in one chart.

Upvotes: 1

Ivan Chau
Ivan Chau

Reputation: 1433

DEMO: http://jsfiddle.net/DdFEB/

  • Align first data point to the left of the axis

Avoid categorized x axis. 

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

Use specific label formatter instead.

var xCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Under xAxis:

    labels: {
        y: 25,
        formatter: function() {
            return xCategories[this.value];
        }
    },

Under xAxis: Use startOnTick with maxPadding

    startOnTick: false,
    endOnTick: false,
    minPadding: 0,
    maxPadding: 0

Related questions:
Put highchart on the very start of the graphic
Highcharts align plot points to start at y-axis
highcharts start from hinges base

  • Adding grid line

Under xAxis: 

    gridLineWidth: 0.5,
    gridLineColor: '#C0C0C0'

For this question: As the top chart and bottom chart mixed together, it is rather difficult to put the labels (e.g. Jan, Feb, etc...) in between the charts. Though it might be possible to do that.

You can see the effect by removing the following lines.

Under xAxis:

        top: -143,

Upvotes: 2

Related Questions