I use the highchart "bar with negative stack": http://www.highcharts.com/demo/bar-negative-stack
I only work with integer numbers, not with floats. My x-Axis looks like this for smaller numbers:
My question:
How can I get rid off the floats and only show full numbers, like so:
I could not find the related option in the API documentation and also researching did not get me any results.
Set allowDecimals: false , It wont show decimal part. In case of X-axis you can define TickInterval: to an integer value to avoid fractional part
As he said, by putting your tickInterval to whole numbers you can achieve the result.
code :
$(function () {
$('#container').highcharts({
xAxis: {
tickInterval: 1
},
Related
I have a stock price chart with variance along xAxis (its a special chart). I want to plot this variance as histogram.I can draw it successfully but I can't get rid of the space between histogram columns. fiddle here https://jsfiddle.net/Lng1w0my/1/ (click on price series to generate histogram)
I have set
groupPadding: 0,
pointPadding: 0
but doesn't work.
I tried a simpler fiddle https://jsfiddle.net/hpdru52b/1/ And this one works fine.
I can't find what is the difference.
Any help is highly appreciated.
You need to set ordinal option to false:
xAxis: {
ordinal: false
}
Live demo: https://jsfiddle.net/BlackLabel/ush37qox/
API Reference: https://api.highcharts.com/highstock/xAxis
I want to format the yAxis label and add trailing zeros after decimal. The number of precision will be decided dynamically as per the value of yAxis labels.
For Example: If there are 3 labels in yAxis with value 95.8, 95.825, and 95.85. then, it should be displayed as 95.800, 95.825, 95.850.
Edit:
Actually, the requirement is to have the decimal precision dynamically. Actually sometimes, our chart shows labels as 93,94,95, in this case we don't want to add precision. The idea is to add same precision, if the chart is generating, yAxis labels like 94.25, 94.5, 94.75, then, I want the chart to show yAxis labels as 94.24, 94.50, 94.75.
For dataLabels there are some format parameters you can add to your y values.
You can add this to the plotOptions structure like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.3f}' // <<< .3f is 3 decimal places out.
}
}
},
Here is a modified fiddle:
http://jsfiddle.net/ja799vep/
More details from highcharts.com:
http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
EDIT:
Sorry the example above was just for datalabels...Here is an improved example that shows, xAxis, yAxis, dataLables and toolTip with different '3 decimal place' approaches.
http://jsfiddle.net/franktudor/okce7p7n/
Consider the following chart toy example which contains a missing value:
$('#container').highcharts({
chart: {
type: 'scatter',
},
plotOptions: {
scatter: {
lineWidth:1,
}
},
series: [{data:[[-3.8,0.4],[-3.3,-0.2],null,[-4.9,-0.7],[-4.8,-0.3]]}]
});
The points lie in the left side on the chart and don't span all its width, as it happens when you remove the missing point from the data series. In other words, the automatic min and max x-axis values seems to not be correctly computed.
In another one of my real examples the issue is more dramatic: all the data points are accumulated on a tiny strip on the left while the remainder of the chart area is completely empty.
What's wrong? It's a bug? There's a solution or a workaround?
You can't have a null x value in Highcharts.
If you want the null point to work as you've described, you need to provide an x value in order to tell the chart where the null y value is.
You've supplied your data in [x,y] pairs, so you must do that for all data points, including the null value.
Updated example, using [-3,null]:
http://jsfiddle.net/jlbriggs/2rNzr/69/
We have column chart, but it will display very ugly when it have lot of column, we enable the scrollbar but its not working properly. Please see the below image.
Please help me on,
How to add margin between group of column.
Or any other way to display the column chart with huge amount of data.
jsFiddle :
`http://jsfiddle.net/utq6zjh5/4/`
Try something like this :
xAxis: {
min: 100
},
Fiddle here: http://jsfiddle.net/utq6zjh5/5/
Try setting some max to xAxis that will work,
setting both min and max to the xAxis will make a pericular range of values to be hown and the chart will be scrollable now,
xAxis: {
max: 3 //3 is just a smple, just check which will work in your case
}
updated your fiddle here
I need to output a plot on page, and I'm considering Highstock or Highcharts to implement this. Highstock interface is more preferable due to navigator pane showing the rest of plot after rezooming.
However my plot has numbers in x-asis, but not date/time. Is there any way to use Highstock with numerical x-scale? Or add similar navigator to Highcharts?
Below X Axis formatter can be used with high Stock for displaying numbers in X-Axis:
xAxis: {labels: { formatter: function () {return this.value;}} }
Highstock's only type of xAxis is datetime, so using it with numbers is not an option. (Maybe if you make some tricky formatting actions and define a custom tooltip with the same formatting options it might be possible).
Leaves only Highcharts and there is an example called master-detail chart that could meet your requirements.
Hope that helps.
xAxis: {
type: 'linear' // Other types are "logarithmic", "datetime" and "category"
},