I have a problem with Highcharts, when trying to position the x-Axis tick marks according to the column data shown. I want to align the x-axis ticks on the right, but all the time they are displayed on the center. X-axis must be numbers, so I don't have categories.
Fiddle here
Experiment with the pointPlacement option.
For instance:
plotOptions: {
column: {
pointPlacement: -0.5
}
}
Produces (fiddle here):
Related
I need to plot the Highcharts column chart from top to bottom. Any advice?
I make use of reversed property in Y-Axis to plot the chart from top to bottom.
yAxis: {
reversed: true,
}
Im trying to sync Highcharts horizontally, stacked with multiple charts vertically- with the goal that the x axis align - some charts have hourly data for a specific range, some have daily data, some have 5-minute data. One grid might have 2 y-axis, zero, or even 3. How to I Align them horizontally?
Image showing unaligned stacked highcharts
You can find a chart with the biggest plotLeft property and apply the same to the others by marginLeft property:
charts.forEach(function(ch) {
if (ch.plotLeft > maxPlotLeft) {
maxPlotLeft = ch.plotLeft;
}
});
charts.forEach(function(ch) {
ch.update({
chart: {
marginLeft: maxPlotLeft
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5012/
API Reference:
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/class-reference/Highcharts.Chart#update
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 have manipulated highcharts heatmap graph to suit some of my requirement. But I am not able to hide the tick lines on secondary y axis. Below is the jsfiddle link of what I have done. http://jsfiddle.net/sandeepkparashar/39xBU/389/389
Please suggest how to hide the tick lines.
Actually, those lines are grid lines and an axis line (the one in the bottom). You can disable them by setting their width to 0.
xAxis: {
lineWidth: 0
...
},
yAxis: {
gridLineWidth: 0,
...
}
example: http://jsfiddle.net/sebdom/39xBU/390/
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