CODEWITHSUNDEEP
javascripthighcharts
user3666954
user3666954

Reputation: 49

How do you position the x-axis labels along the line y=0 using Highcharts?

I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.

I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work. 

xAxis: {
  min: -20,
  max: 20,
  tickInterval: 1,
   gridLineWidth: 1,
    endOnTick: false,
     crossing:0,
    title: {
        text: 'some value', 
    },

If someone could help me with this positioning, I would appreciate it.

Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/

Upvotes: 2

Views: 1570

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

crossing is not an out-of-the-box feature of Highcharts.

Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values

Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>

Now, adding the crossing variable to your x-axis will show the labels as in the demo.

I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.

1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:

  xAxis: {
    crossing: 0,
    opposite: true,
    min: -20,
    max: 20,
    tickInterval: 1,
    gridLineWidth: 1,
    endOnTick: false,
    title: { text: '' },
    labels: { y: 15 }       // pushes the labels down below the crossing line
  },

2) I then adjusted the plot line for the y-axis as follows:

  yAxis: {
    min: -20,
    max: 20,
    tickInterval: 1,
    endOnTick: false,
    title: { text: 'some value' },
    plotLines: [{
      value: 0.1,
      width: 1,
      color: 'black',
      zIndex: 10 }]     // moves the plot line above the axis gridline
  },

The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:

enter image description here

Please let me know if this better answers your question.

Upvotes: 3

Related Questions