Hello Stackoverflow Community,
i have a trouble with highcharts breaks for x axis.
JSFiddle 1
Point a value : Date 2014-12-11T11:24:49.000Z
point b value : Date 2014-12-11T17:50:47.734Z
point c value : Date 2014-12-19T16:19:26.000Z
point d value : Date 2014-12-21T20:51:52.000Z
My chart after adding a break like:
[...]
options.xAxis.breaks.push({from:pointb+1000, to: pointc-1000, breakSize: 1 })
[...]
var chart = new Highcharts.Chart(options);
JSFiddle
Where are the xAxis tick's after the breaks ?
Tick are placed on same positions as in a chart before the break was applied - 20. Dec.
You can change how ticks are placed using, for example, tickInterval and set it to 12 hours - 43200000
Example: http://jsfiddle.net/kwqqcx5b/
Related
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
I want to plot x axis next to 0th y axis tick label in case of negative data. Refer Image: To plot Xaxis next to 0th tick label
Is there any way to achieve this in Highcharts?
Refer to this live working demo: http://jsfiddle.net/kkulig/gxxtfn67/
I slightly modified the code of xAxis zero crossing plugin (https://github.com/ppoliani/xAxis-zero-crossing). I enabled rendering of the y axis and removed the line responsible for positioning x axis labels. The final code looks like this:
(function (H) {
H.wrap(H.Axis.prototype, 'render', function (proceed) {
var chart = this.chart,
xAxis, yAxis, extremes, crossing;
if (typeof this.options.zeroCrossing === 'boolean') {
xAxis = chart['xAxis'][0];
yAxis = chart['yAxis'][0];
extremes = yAxis.getExtremes();
crossing = Math.abs(extremes.min) + Math.abs(extremes.max);
this.offset = yAxis.toPixels(crossing, true);
chart.axisOffset[this.side] = 10;
}
proceed.call(this);
});
}(Highcharts));
UPDATE
Live working demo for bar series (inverted chart): http://jsfiddle.net/kkulig/gyp8n9ou/
I am using a Area/line chart and plotting for 2 points. Also using a xAxis Label formatter property for customizing the label to display as follows. But when using this the chart is not generated. And also I tried to remove the formatter property, the chart id generated but the xAxis label is displayed as 0.5 [At least we need to get label text from categories]. I have included 2 jsfiddle url where we tried two approaches. Please help and provide solution for displaying the xAxis label what we provided in the categories.
JsFiddle:
http://jsfiddle.net/jw2p5Lxa/17/
http://jsfiddle.net/p2EYM/116/
labels: {
formatter: function() {
return this.value.substring(0, this.value.indexOf('_'));
}
Thanks in advance!
You've essentially told the chart, with your min and max values, to cut off the first and last label.
Get rid of this:
min: 0.5,
max: categories.length - 1.5,
And use this:
minPadding:0,
maxPadding:0,
Updated Fiddle:
http://jsfiddle.net/jlbriggs/p2EYM/118/
Output:
You can save categories in an array and use xAxis.formater() to display specific label in your first example:
var categories = ['Jan 12_Jan 12', 'Feb 12_Feb 12'];
formatter: function() {
return categories[this.value];
}
Also, do not use min and max properties. In the second example getting rid of min/max should be enough.
Examples:
http://jsfiddle.net/jw2p5Lxa/21/
http://jsfiddle.net/p2EYM/120/
I have a datetime chart to show daily data within 3 years in a series,
I set the x-Axis formatter to display month of a year in the general view
Screen Capture of General View
I set the 'zoomtype' to 'x', when it zoom to daily level,
the x-axis still show the month base on the formatter I set before
Screen Capture zoomto daily level
How can I change my x-axis formatter when detect zoom action?
formatter: function () { // Single digit month
var mth = Highcharts.dateFormat('%b', this.value).replace(/^[0]+/g, " ");
var year = Highcharts.dateFormat('%Y', this.value);
if (mth == 'Jan')
return mth + '<br>' + year;
else
return mth;
},
Some Method I have tried, but failed :
1) Make 3 different x-axis stand for 'day', 'month' and 'year', add/remove those axis when different zoom level is detected
2) use chart.update() in selection event
3) use chart.redraw() in selection event
Thanks!!
update
Thanks Pawel, I have tried below syntax inside the xAxis Formatter, but seems cannot return the getExtremes correctly,
please kindly advice, thanks!!
var extreme = this.getExtremes();
var extreme = this.xAxis[0].getExtremes();
I need use a percentage and absolute value of the axis Y from the one serie.
There is some example in highchart http://www.highcharts.com/demo/combo-multi-axes but it's using two different series. I need, for example, value in axis Y until 1000 and in the other axis Y show the percentage to the item serie.
You can create a second Y-axis and link it to the first (0th) using the xAxis.linkedTo property. Then in the label formatter of the second axis, to the calculations to get the percentage.
yAxis:[{
},
{
labels:{
formatter:function(){
var max=this.axis.linkedParent.dataMax,
min=this.axis.linkedParent.dataMin,
range=max-min;
return ((this.value-min)/(range)*100) + ' %';
}
},
linkedTo:0,
opposite:true
}
]
Dual axes | Highchart & Highstock # jsFiddle