CODEWITHSUNDEEP
javascriptjqueryhighcharts
dr.jekyllandme
dr.jekyllandme

Reputation: 623

How to set interval points on the x-axis in HighCharts?

I have a bubble chart and would like to set the interval points on the x-axis to a predefined list. For example, the list is [90, 100, 103, 108, 110, 112, 116, 120]. Here's my code:

jQuery("#center_col_wrapper").highcharts({

chart: {
  type: 'bubble'
},

title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
  text: "BUBBLE CHART"
},

categories: ['90', '100', '110']
},
yAxis: {
title: {
  text: ""
},
labels: {
  enabled: false
}
},
series: [
{
  name:"S1", data: [[100,10,87]]
}, 
{
  name:"S2", data: [[100,11,87]]
},
{
  name:"S3", data: [[110,12,87]]
},
{
  name:"S4", data: [[110,13,87]]
}
]

});

Here's my jsfiddle: http://jsfiddle.net/mLP7U/

Upvotes: 2

Views: 15767

Answers (2)

dr.jekyllandme
dr.jekyllandme

Reputation: 623

So I was able to do this using formatter function in labels. I set min to 0, max to 5, and tickInterval to 1. An array was defined and formatter used this array to choose the appropriate label.

var labels = ["70", "90", "100", "110", "130", "145"];
jQuery("#container").highcharts({

chart: {
  type: 'bubble'
},

title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
  text: "Change"
},
    tickInterval: 1,
    min: 0,
    max: 5,
    labels: {
        formatter: function() {
            if (labels[this.value]) {
                return labels[this.value]
            }
            return "e"
        }
    }
},
yAxis: {
            gridLineColor: "#ffffff",

title: {
  text: ""
},
labels: {
  enabled: false
},
    tickInterval: 1,
    min: 0,
    max: 5
},
series: [
{
  name:"A", data: [[2,1,87]]
}, 
{
      name:"B", data: [[2,2,87]]
},
{
  name:"C", data: [[2,3,87]]
},
{
  name:"D", data: [[4,1,87]]
}
]

});

http://jsfiddle.net/mLP7U/6/

Upvotes: 1

matt
matt

Reputation: 115

You can specify 

minTickInterval: 10,
min: 90,

within your xAxis configuration.

See http://api.highcharts.com/highcharts#xAxis.min

and http://api.highcharts.com/highcharts#xAxis.minTickInterval

for explanations on these items. This will make only the 90, 100, and 110 labels appear on your x axis

Upvotes: 2

Related Questions