My Bubble Chart - https://jsfiddle.net/cm4fortp/
Here in this chart I am showing data of last 3 months. The problem is due to width, Highcharts is wrapping up the x-axis ticks i.e. showing only few x-axis labels. I want to show the label for every first date of month and also on 2-weeks interval.
I have used following formatter to play with x-axis labels but not all indexes are coming here.
xAxis: {
labels: {
formatter: function() {
if(this.value!=-1 && this.value!=0){
console.log(this.value); //to print all the x-axis index
}
}
}
}
I am looking for maybe something that can give me all the x-axis index or can force Highcharts to display all x-axis labels or something horizontal scroll so that I can increase and fix the width of chart to show all labels.
To show as many ticks as you want you can use xAxis.tickPositions - an array defining where the ticks are laid out on the axis.
API reference:
https://api.highcharts.com/highcharts/xAxis.tickPositions
Related
I have the first chart:
Multiple y-axis with broken y-axis for left-hand-side y-axis only
The left-hand-side y-axis is broken from 1M to 25M, while there is no broken setting for the right-hand-side y-axis. The horizontal lines for the 2 y-axis in the chart area make it a little bit hard to read. It can be improved by setting the broken for the right-hand-side y-axis from 250K to 6.25M like the 2nd chart shows:
Multiple y-axis with broken y-axis for both y-axis
The broken setting is set by user. They cannot preview the result when configuring the settings.
I want to have a chart with the horizontal lines for both hand side overlapped with each other. I can only add the broken setting for right-hand-side y-axis. But I should know the min & max value for all the series used. The min value is default to be 0, but the max value for the series which use left-hand-side y-axis is around 44M, while it is around 13.5M for the right-hand-side y-axis. But the chart shows me 56M for the left-hand-side y-axis, while it is 14M for the right-hand-side y-axis. I cannot predict the max value for the y-axis while generating the chart setting.
Is it possible to add the broken setting for the right-hand-side programmatically? Or is there any other approach?
Is it possible to add the broken setting for the right-hand-side
programmatically? Or is there any other approach?
Yes, adding programmatically calculated breaks seems to be the only way. You can use for example chart's load event where you have access to all the required values.
For example:
chart: {
events: {
load: function() {
const yAxes = this.yAxis;
yAxes[1].update({
breaks: [{
from: 20,
to: 40,
breakSize: 0
}]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/s01box6p/
API Reference:
https://api.highcharts.com/highcharts/chart.events
https://api.highcharts.com/highcharts/yAxis.breaks
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/
I have a 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});
I am drawing a line chart with monthly data points. However, I want the scale to display year strings only.
So far, so easy. However, as far as I can see, Highcharts will always draw the xAxis labels relative to the ticks... and I am required to display them centered between ticks.
Is there some simple way of doing this that I am missing, please...?
According to my understanding, the behavior you desire is: http://jsfiddle.net/msjaiswal/U45Sr/2/
Let me break down the solution :
1. Monthly Data Points
One data point corresponding to one month :
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Scale to display only yearly ticks
Use chart options like this:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
There is no simple, out-of-the-box solution. You have to use events and reposition the labels accordingly. Here is a sample solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).
This can be done with a workaround by manually adjusting the label positioning via a callback (called on both load and redraw). Please see the fiddle linked to in my comment on this post: Highcharts - how can I center labels on a datetime x-axis?
There are several xAxis options which may help do what you want.
http://api.highcharts.com/highcharts#xAxis.labels
Take a look at 'align' which specifies whether the labels are to the left or right of the tick, and also 'x' which allows you to specify a x-offset for the label from the tick.
Have you tried to use tick placement ? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
In chart, the x-axis labels are overlapping, when chart data is big.
I have used "step" property as follows :
xAxis: {
labels:{
step: (stepVal ? stepVal : 0),
},
}
I calculate the value of stepVal, depending upon data.
This resolves the issue of overlapping labels on x-axis.
But, when I zoom the chart, I want to see all the labels on x-axis.
How to get it?
In Highcharts 3.0 you can use
chart.xAxis[0].update({
labels: {
step: newValue
}
}
for updating step. Just setting new value in options for new chart won't work.
I believe what you are looking for is this..
http://api.highcharts.com/highcharts#chart.events.selection
You would need to change the xAxis labels steps in the event of a zoom action. You will need to determine how many labels you would want to show, based on how many labels are visible as a result of the zoom.