Develop Reference

How to make yAxis column start with value min yAxis in Highcharts?

I use Highcharts to plot the graph, but there is a problem I am facing. data contains the values from 1 to n. So I want the yAxis column to start at 1. I set yAxis min = 1 but it doesn't fix my problem.
Here is a jsfiddle that illustrates the problem I am having:
Link
yAxis: {
title: null,
endOnTick: false,
min: 1
}
Is there any way to solve my problem? I expect it like this:
I expect it like this

The simplest solution is to use tickPositioner function and modify the first tick. For example:
yAxis: {
title: null,
tickPositioner: function() {
const tickPositions = [...this.tickPositions];
tickPositions[0] = 1;
return tickPositions;
},
endOnTick: false,
startOnTick: false,
min: 1
}
Live demo: https://jsfiddle.net/BlackLabel/rf3cm8Lw/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner

Thanks for ppotaczek answer. I find it pretty cool, can ignore blanks, starting from the smallest element. I have a solution for this and am posting it here for anyone who needs it.
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}

Move highcharts yAxis.tickPositioner callback function outside to some util function

I'm trying to implement highcharts with multiple y-axis and need to set yAxis.tickPositioner callback function for each of the y-axis. So instead of writing the duplicate code in each callback I need to create a util function to which I can pass values like dataMin and dataMax which is only accessible in the tickPositioner callback function.
chartOptions {
xAxis: {
tickPositions: [0, 1, 2, 4, 8]
},
yAxis: {
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
},
}
instead I want something like this which has all the values like this.dataMin and this.dataMax available in the util function
chartOptions {
xAxis: {
tickPositions: [0, 1, 2, 4, 8]
},
yAxis: {
tickPositioner: this.utilFunction();
},
}
utilFunction() {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}

You have access to an axis by this in utilFunction, if you assign it in this way:
yAxis: {
tickPositioner: this.utilFunction
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4958/
If you need to use some other context in the function, you can pass the reqired values through arguments:
yAxis: {
tickPositioner: function() {
utilFunction(this.dataMin, this.dataMax);
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4959/

Highcharts yAxis.max manage tick intervals dynamically

I'm trying to set the max and min of y value dynamically based on the data but it is having some troubles for some values. I think the highchart couldn't set values that doesn't have a proper tick.
For eg: min: 3 and max 10. Then, the highchart won't set these values instead of that it will set a value ranging from 0...14. This is just an example value, sometimes I get 36000.14 as min and 454533.18 as max.
So my logic isn't working in that case.
This is the part of code which I currently have:
data = [3.43, 3.58, 4.86, 8.55, 8.77, 4.44, 9.67]
maximum_val = Math.ceil(maximum_val) eg: 10
minimum_val = Math.floor(minimum_val) eg: 3
evolution_options.yAxis[$('#div_count_'+div).find('#y_axis_lbl').text()] = {
min: minimum_val,
max: maximum_val,
title: false,
labels: {
style: {
color: 'black'
}
}
}
Update
Fiddle : http://jsfiddle.net/e3fy1vu9/
Further Brainstorming
I think it is because the min value isn't a multiple of the max value so Highchart couldn't calculate how to split the tick. If there was any way so I could set the max value as the multiple of the min value.

Here is my advice how to calculate the max and min for yAxis from the defined data.
Demo: https://jsfiddle.net/BlackLabel/0qwt1kx7/
yAxis: {
min: Math.floor(Math.min(...data)),
max: Math.round(Math.max(...data)),
tickAmount: Math.round(Math.max(...data)) - Math.floor(Math.min(...data)) + 1 //1 count the min or max as itself
},
Please test it and let me know if it fits to your requirements. Because the tickAmount value depends on how many values is included in the data array and probably some modifications are needed for larger data.
EDIT:
Try to use this custom solution to calculate the yAxis positions:
Demo: http://jsfiddle.net/BlackLabel/ztaj6Lkd/
var positions = [],
tickNumbers = 5,
tick = Math.floor(Math.min(...data));
for(let i = 0; i < tickNumbers; i++) {
positions.push((Math.round(tick * 100) / 100));
tick += Math.round(Math.max(...data)) / tickNumbers
}
//add the max
positions.push(Math.round(Math.max(...data)))

Hi I have fixed it by setting this alignTicks:false option.
evolution_options.yAxis[$('#div_count_'+div).find('#y_axis_lbl').text()] = {
min: minimum_val,
max: maximum_val,
title: false,
labels: {
style: {
color: 'black'
}
},
alignTicks: false
}

Start live Flot Chart at 0

I have a Flot Chart that is live and generates random numbers that displays on the chart. It is used only as a dummy so I don't need real live data. I want the chart to start at 0 on yaxis and 100 on xaxis to make it look as real as possible. Below is my code in the js file.
var data = [], totalPoints = 100
h = 0
function getRandomData() {
//h = h + 1
//return h
//data.push(h)
if (data.length > 0)
data = data.slice(1)
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5,
if (y < 0) {
y = 0
} else if (y > 100) {
y = 100
}
data.push(y)
}
// Zip the generated y values with the x values
var res = []
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res
}
var interactive_plot = $.plot('#interactive', [getRandomData()], {
grid : {
borderColor: '#f3f3f3',
borderWidth: 1,
tickColor : '#f3f3f3'
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color : '#3c8dbc'
},
lines : {
fill : true, //Converts the line chart to area chart
color: '#3c8dbc'
},
yaxis : {
min : 0,
max : 100,
show: true
},
xaxis : {
show: true
}
})
var updateInterval = 500 //Fetch data ever x milliseconds
var realtime = 'on' //If == to on then fetch data every x seconds. else stop fetching
function update() {
interactive_plot.setData([getRandomData()])
// Since the axes don't change, we don't need to call plot.setupGrid()
interactive_plot.draw()
if (realtime === 'on')
setTimeout(update, updateInterval)
}
//INITIALIZE REALTIME DATA FETCHING
if (realtime === 'on') {
update()
}
//REALTIME TOGGLE
$('#realtime .btn').click(function () {
if ($(this).data('toggle') === 'on') {
realtime = 'on'
}
else {
realtime = 'off'
}
update()
})
/*
* END INTERACTIVE CHART
*/
There is a button that calls the Flot chart into action and it works great but it looks too much like a staged chart. I need it start at 0 on the y-axis and 100 on the x-axis. Any information on how to go about this would be great and very much appreciated.

Fill your data array with zeroes before you start, then your update function starts adding random points one at a time instead of starting with 100 random data points:
for (var i = 0; i < totalPoints; i++) {
data.push(0);
}
See this fiddle for a full example.
PS: Please end your code lines with a semicolon!

Highcharts: Y axis label formatter

I have this y axis labels formatter
yAxis: {
title: {
text: null
},
labels: {
formatter: function(){
return (Math.abs(this.value) / 1000000) + 'M';
}
}
},
but I need the formater to check if the values is more than million 1000000 then format it accordingly..
I've tried this but it didn't work properly
yAxis: {
title: {
text: null
},
labels: {
formatter: function(){
if (this.value > 999999) {
return (Math.abs(this.value) / 1000000) + 'M';};
}
}
},
it displayed the labels on one side only..
I'm using the Stacked bar chart pyramid
here is it on JSFiddle
http://jsfiddle.net/chGkK/

The issue is the formatter function only returns a label if the value is greater or equal to 1 million. You need to use the absolute value in this comparison and move the return statement outside the if block:
var absValue = Math.abs(this.value);
if (absValue >= 1000000) {
absValue = (absValue / 1000000) + 'M';
};
return absValue;