I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.
Related
I have a chart where I've set a maxBarThickness on my axis. When the chart is populated with a lot of data, the datasets are close together, but when there are just a few data points, the datasets look wide apart.
I have tried setting categoryPercentage to a smaller percentage but when the chart is populated with a lot of data (or on page resize), the chart looks wrong. Any help would be appreciated.
According to this github issue you cannot change the space between bars if you decide to set a barThickness (I assume it does not work when maxBarThickness is set either but I might be wrong, if so I'll delete this answer)
According to the previous link, you have two solutions:
If you want to keep your bar thickness (answer to the github issue):
If you don't want to stretch out the bar to fill the extra space, you have to reduce the width of the canvas.
Otherwise you could set a barPercentage and a categoryPercentage on your chart, without a barThickness or a maxBarThickness:
scales: {
xAxes: [{
categoryPercentage: 0.8,
barPercentage: 0.9
}]
},
Those are the default values.
Related questions :
Chart.js Bar Chart: How to remove space between the bars in v2.3?
CharJS 2.5.0 - How to remove space between bars
Reduce space between ticks in horizontal bar-chart chartJS
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/
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
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/
When using Highcharts (v.3.0.5), I have multiple Y Axis displayed in the same chart. Using the legend, a user can choose to hide or show any of the Y Axis as they want. All this is built in feature of the Highcharts javascript library. However, when a Y Axis is hidden, its Title still appears visible in the Chart. I would like to hide it when the rest of the Y Axis is hidden. Surprised this is not the default behaviour already. Does anyone know how to do that?
The behaviour can be seen by looking at the example provided on Highcharts examples page:
http://www.highcharts.com/demo/combo-multi-axes
If you hide the "rainfall" axis for example, the title remains in the chart as "Rainfall".
I found this post (several years old) where the exact same question was asked. However, the solution proposed does not work. The show and hide events, redisplay everything.
http://forum.highcharts.com/highcharts-usage/how-to-hide-y-axis-title-multiple-axis-t6973/#p32842
This actually turns out to be a much sought after question/answer. Since Highcharts V2.2, it is possible to assign "showEmpty: false" to y axis definitions and this will ensure that when hidden, the Y-axis text label is also hidden. Example snippet of config below:
yAxis: [{
min: 0,
showEmpty: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#3366CC'
}
},
title: {
text: 'Clicks',
style: {
color: '#3366CC'
}
},
id: 'Clicks'
},
...
I have read reports where this showEnabled = false breaks if both min and max are also set. In the case above, where only min is set, it worked well for me using Highcharts V3.0.5
you can use yAxis.setTitle() and set/remove the title when needed.
here is the api documentation link
#arcseldon, it is true that showEnabled = false breaks if both min and max are also set. A possible workaround in this case is to set floor and max instead