How to set interval points on the x-axis in HighCharts?
15,225
Solution 1
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
Solution 2
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]]
}
]
});
Author by
dr.jekyllandme
Updated on July 28, 2022Comments
-
dr.jekyllandme almost 2 years
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/
-
dr.jekyllandme almost 10 yearsThank you. But what if my list of points for the x-axis is [90, 95, 100, 103, 108, 110]? I can't define a minTickInterval because there can be no interval.
-
Sebastian Bochan almost 10 yearsSo ticks should be in the same positions as x values of points? If yes, you can use tickPostioner/tickPositions. api.highcharts.com/highcharts#xAxis.tickPositioner