Develop Reference

Highcharts Y-Axis Limits

I am having problems controlling the Y-Axis range of a highcharts graph. It seems like highcharts likes nice round numbers. When my data passes or is close to certain thresholds, the Y-Axis range can expand a lot which effectively compresses all the plot points downward.
Here is a jsfiddle that illustrates the problem I am having:
https://jsfiddle.net/shannonwrege/z8h5eork
The relevant code for this post is this:
chart.yAxis[0].setExtremes(0, max, true, false);
Keep in mind that I don't know what the data will look like in advance, so I must dynamically modify the Y-Axis range. Right now I am using the setExtremes because of other suggestions I've read on stackoverflow.
The maximum y-value of the data in the first two charts is 99. You'll notice that the y-axis is set at 150 in the first chart where the range is automatically calculated and 100 in the second chart where I specifically set the extreme values. The look of the 2nd chart is what I want. So it seems like setExtremes(0,99,true,false) should do the trick, but it actually doesn't.
In the 3rd chart I changed the data so that the maximum y-value of the data is 101, and I called setExtremes(0,101,true,false). You'll note that the y-axis is now back to 150.
Ideally I want the scale of the graph to be capped on the maximum value to limit the about of extra white space. I want to see all of the data, but I don't necessarily care about the y-axis displaying a maximum band that is greater than the max data value. In this case, I would be happy with the y-axis displaying 100 on the axis and some points over but still visible.
Does anyone know how to make this work?

I ended up using the endOnTick parameter to solve this problem. Adding the following line to the yAxis configuration parameters did exactly what I wanted:
endOnTick: false,
Here's the updated Fiddle showing the results.
https://jsfiddle.net/shannonwrege/z8h5eork/3/
All of the charts look pretty good in my opinion (even the one where the yAxis range was auto calculated).

You will need to read the data and then round up to set the idealMax
var chart,
idealMax = 0; // init the max value
// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
if (options.series[0].data[i][1] > idealMax) {
idealMax = options.series[0].data[i][1];
}
}
// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;
options.yAxis.tickPixelInterval = idealMax/10;
Highcharts.chart('container1', options);
chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);
Updated Fiddle

How to round off the float values in graph using javascript

b.yAxis().setLFormat('{value|' + parseInt(myvalue[7],10)+ '}');
Above code snippet returns values as "0.2" and increments by 0.2,0.4,0.6 but I need this whole number like 1,2,3,4....Found allowDecimals: false option but not sure how to pass to get the round value.Can somehelp me.

I had missed it: you want to display only the integer ticks in the graph, not to round off your float values. That's a different matter. You need to check on the documentation for the library you're using.
First off, you need to tell us what library you're using. From what you say (setLFormat, allowDecimals, javascript) I believe you're using HighStock.
Then you check either the documentation or the user forums for the relevant software. In this case you're in luck, the documentation is exhaustive. You may have already checked out that page, but possibly you did not notice the links to the examples.
Also, the structure of the property JSON is given on the left hand side of the page; as you can see the allowDecimals for yAxis must be supplied on the HighChart container call, not on each single value.
You can see its use from this fiddle (click here).
You need to specify, for Y axis,
yAxis: {
title: {
text: 'Flats'
},
allowDecimals: false
},
If you need BOTH effects (integer points and integer grid), then you need apply both methods: set allowDecimals to false, and use Math.floor(value) or Math.round(value) instead of value on each value.
If my guesses are correct and this answer works, apart from accepting it :-), you may want to edit your title to reflect the fact that you're using HighStock JS library and you want it to use an integer grid. This is possibly the reason why you got downvoted; you may want to check out this page. (None of us started out asking good questions - I know that I definitely did not.)

Highstocks - Use tickmarkPlacement "between" on datetime Axis (no categories)

Is there any workaround to have tickMarkPlacement set as "between" on a datetime Axis? I am aware is not supported by the API but I was hoping to find some sort of hack/plugin.

You can fudge it with the x axis label's x property.
Example:
http://jsfiddle.net/jlbriggs/3qtZr/36/
[[update after comments:
if you mean that you want the data points to also line up 'between', then there isn't a good easy way.
My approach would be
1) make sure there is only one data point per axis tick, ideally
2) adjust the x value of the data point to push it to the right in a way that corresponds with the label offset
3) adjust tooltip formatters to correct the date for display
or, 4) just go with categories
However, if you can explain why you want to do this, what effect you're going for, perhaps there's more that can be done.
{{further updates:
After playing around a little more, I found another way to fudge the data point placement, though I am unclear whether you need that.
Example here:
http://jsfiddle.net/jlbriggs/3qtZr/39/
It uses the pointPlacement property.
The catch is that the pointPlacement property doesn't work if there is not a columns series present with as many data points as the line series, it seems.
So this method adds and hidden dummy column series in order to make the pointPlacement property affect the line series.
Not elegant, but it beats having to adjust the data values and then re-adjust them in the formatter.

Proper way to limit out NaN values, on a figure-by-figure basis

What is the proper way to limit out NaN values from dc.js figures?
Let's say these values are checked on the dimension function and converted to a numerical value -1000, when the legal numerical range in my case is [0,Inf). Then, I draw a bar chart (histogram) and set the x axis limits to start from 0 onwards. In this manner I can avoid the -1000 peak, but only if the option elasticX is disabled.
Is there a renderlet solution or another approach that would allow me to use the elasticX option and in the same time omit the -1000 peak?
I do not want to address this by using crossfilter, as this would filter out the whole sample row, as the sample might have a defined value for a different variable, but on Dc.js figure-by-figure basis.

Use the "fake group" technique described here:
https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted
... to remove unwanted groups before drawing/updating the chart.(Really .data() is designed for this but it doesn't work for all charts, yet.)

How to print a javascript object from highcharts

I am trying to output the value (month12 revenue - month12 cost) at the very bottom of the chart where it says "ROI: $XXX.XX or X%". I am new with JS and every function I have wrote doesn't work. How can I make the calculation (referenced above) print to the bottom of the chart?
This should make it easier to see what I'm talking about: http://jsfiddle.net/nlem33/L5cY6/9/
console.log(newdata);
chart.series[0].setData(newdata2);
chart.series[1].setData(newdata);

You were almost close.
The reason the graph was not changing is because of yAxis - max 60000
Try reducing it and check what happens . The values that you were using were not to scale properly.
So you need to set the min and max based on the user selection and redraw the chart every time the value exceeds the maximum.
While caluculating the newdata have a max value and pass that value when you are redrawing the chart so that it can be accounted for.