Individual positioning of x-axis labels in a polar highchart - javascript

I have a polar highchart with 12 categories. Since x-axis labels contain up to 4 lines, automatic label y-positioning is slightly off for the categories on the top and the bottom. It looks similar to this example, but in my case, the labels overlap with the chart area, not with each other. So I need to subtract a few pixels from the y-coordinate of the labels on the top and add a few pixels for the category labels at the bottom.
I tried setting the offset parameter of the x-axis, but this shifts up or down all labels by the same amount:
xAxis: {
offset: 20
}
I also tried adding a callback function to the formatter of the x-axis labels, but I just can't figure out how to adjust every category label position.

this is a solution of highchart Heldesk
http://jsfiddle.net/crguqmsv/1/
function(chart){
var len = chart.xAxis[0].ticks.length;
$.each(chart.xAxis[0].ticks,function(i,tick){
if(i>=0 && i<=90) {
console.log(tick.label.attr({
rotation:-45
}));
}
});
}

You can adjust the position of the labels with the "x" and "y" options within the "labels" category under the axis definition.
labels: {
x: 20,
y: 10
}
In the above case, the labels will be 20px right and 10px down from their default position.
EDIT: I re-read the title, and Im sorry, this is for all the labels, not individually. My Bad.

Related

Highcharts: Scrollable Plot Area In Line Chart To Contain Specific Number of Points

I've got a line-chart with potentially more than 10 points. It will be drawn inside a container element with fixed width (let's say 800px).
In case the points count gets more than 10, I need to make the chart scrollable in a way which initially displays only the last 10 points.
Here's the fiddle for what I have right now:
https://jsfiddle.net/kpx13oz9/69/
Currently, I have the scroll-bar initially sitting on the rightmost position (which is what I want). But, as I increase the number of totalItemCount, more points are included inside the scrollable plot and some of the ticks on the x-axis become hidden.
I'm looking for a configuration which enforces the following:
regardless of the number of points, display the latest 10 points. the rest of the points will be accessible by horizontal scrollbar.
All the ticks on the x-axis need to be displayed always. No auto-hide.
You can dynamically calculate the minWidth property based on the created chart. To show all of the labels, set xAxis.tickInterval to one day.
chart: {
events: {
load: function() {
const minWidth = this.plotSizeX / 9 * workOrderHistory.length;
this.update({
chart: {
scrollablePlotArea: {
scrollPositionX: 1,
minWidth
}
}
}, false);
this.xAxis[0].update({
width: '100%'
});
},
render: drawCrosshair(crosshair, 'red')
}
}
Live demo: https://jsfiddle.net/BlackLabel/v3zowk9e/
API Reference: https://api.highcharts.com/highcharts/xAxis

PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

I am developing a barchart in React Js using React HighCharts Library. So in some of the case my data interval is not linear(diffrence between min value and max is very large). so the plotlines are overlapping. Sharing the image for reference.
Please help me to solve this i want my label to show clearly.
In this Image i have 2 plot lines valued at 0.66 and some nearby value 0.5 or so.
They are overlapping. Please help to solve this case.
Thanks.
Highcharts doesn't provide any mechanism for handling overlapping plot lines - it has to be done manually.
Plot line labels can be adjusted by using y property:
plotLines: [{
value: 22,
color: 'red',
width: 1,
label: {
text: 'First label',
y: 13
}
}
Live demo: http://jsfiddle.net/BlackLabel/zm5fk3rw/
If you're looking for more dynamic approach place the code responsible for changing the position of labels in chart.events.load callback.
Current y position of label is kept in yAxis.plotLinesAndBands[i].label.alignAttr.y property. yAxis.plotLinesAndBands[i].label is SVGElement so its y position can be changed like this: yAxis.plotLinesAndBands[i].label.attr({y: newValue}).
Starting point for implementing dynamic logic for positioning plot line labels: http://jsfiddle.net/BlackLabel/1vh940kj/
API references:
https://api.highcharts.com/highcharts/yAxis.plotLines.label.y
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Plot line value property works the same as y in points - it reflects the real value and it's normal that plot lines overlap when they have almost the same value.
If you want to change its y position anyway you can use the same approach that I proposed for dynamic positioning of the labels (current y position of the label can be extracted from yAxis.plotLinesAndBands[0].svgElem.d property):
Starting point for implementing dynamic logic for positioning plot lines: http://jsfiddle.net/BlackLabel/t2hxrwp5/

Start graph rendering after left sided labels in Highstock

In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/

Left-align y-axis title with labels in Highcharts

In Highcharts, I'd like to put the y-axis title at the top and have it left-aligned with the y-axis labels.
I've tried this:
$('#container').highcharts({
...
yAxis: {
...
title: {
align: 'high',
text: 'Y-axis title',
rotation: 0,
y: -10,
//To left-align title with labels
textAlign: 'left', //This is undocumented, but appears to work
margin: 0
}
}
})
However, I get an excessive left margin which seems to be proportional to the length of the y-axis title.
JsFiddle
It looks like the margin calculation doesn't take into account the textAlign: 'left' setting.
UPDATE: I should say that my current "solution" is to set a margin with chart.marginLeft but that's not ideal because it's fixed. The left margin should be just big enough to accommodate the axis labels (however big they might be).
How can I left-align the y-axis title with the labels and have a reasonable left margin?
I decided to use marginLeft (yes, you read that correctly), but based on the length of your axis label, to provide the needed flexibility.
What I did here is set your chart options to a variable called chartOptions. I then calculated the length (number of characters) of the axis title, set the marginLeft property based on that value, and then drew the chart with the amended chart options.
chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length;
var chart = $('#container').highcharts(chartOptions);
Here's the working fiddle: http://jsfiddle.net/brightmatrix/6eeuay58/9/
I tested it with different numbers by increasing some of your data points.
Please let me know if this is useful and helpful for you.

beta2 maxRotation set to 0 causes labels to overlap

I'm using a Chart.js beta 2 line chart. I'd like my x axis labels not to rotate, because it messes up my layout. I'm setting the options to have the ticks.maxRotation property set to 0. When I do so the labels are not skipped properly, but overlap instead.
this.options = {
scales: {
xAxes: [{
ticks: {
maxRotation: 0
}
}]
}
};
I also tried providing a ticks.userCallback to only show certain labels and skip myself, however I found doing this not only removes the label from the xAxis display, but also from the tooltip. I always want the tooltips to display the label.
So, what is the best way to keep labels oriented at 0 rotation and not have them overlap ?

Categories

Resources