I have a column chart with reversed yAxis:
jsFiddle
dataLabels: {
enabled: true,
color: 'white',
verticalAlign: "bottom",
y: 10,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
I want to show the data labels inside the column like in the jsFiddle example, but can't set the position to be near the top border like here or above the top border of each column.
How can I achieve it?
You need to set directly options for dataLabels to get them visible, see: http://jsfiddle.net/sX83S/2/
dataLabels: {
...
verticalAlign: "top",
overflow: true,
crop: false,
inside: true,
}
The problem you have is based on fact, that you change start point of yAxis. I don't know is it possible to achieve "top" in your case, because the column's don't have same start points but stop at the same finish point "150". This give something close result, but you should think further:
dataLabels: {
enabled: true,
color: "white",
rotation: -90, //optional
align: "left", // "right" or delete it at all
y:-150, //this is crucial
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
},
So, anyway you should play with y ("y:-50" is the "top" level, "y:-150" is the "bottom" level) and figure out that meaning is different for all columns.
UPD.: As I understand you want to place it right on the edges of each columns, alas I'm not sure is that possible.
Related
I'm using highcharts to plot out a line graph of quite a few sections. I want the legend to be static at the bottom of the graph area. The height of the graph area can be fixed but the legends can change dynamically.
I'm using the below options in for legend object
legend: {
useHTML: true,
enabled: true,
reversed: false,
verticalAlign: 'bottom',
floating: true,
align: 'center',
padding: 10,
margin: 20,
itemDistance: 10,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
},
itemMarginBottom: 10,
x: 0,
y: 100
},
I have replicated it in the fiddle
https://jsfiddle.net/x496tLmf/1/
Is there any way to fix this and have the legends stuck to the bottom. All of them need to display as the graph will be exported as static image.
There are two main issues why the legend overlaps the chart:
When you manually set the chart margin, the chart won't reserve space for the legend.
When you enable the legend floating option, you explicitly allow legend for overlapping
API: https://api.highcharts.com/highcharts/legend.floating
The solution here is to remove the properties mentioned before and let the chart calculate the position of the legend.
However when you want to export this chart as a static image with all the legend items you have to specify the size of each element together with some overflow style to cut them a bit.
You might also reduce the spacing in between them, to increase the chart area.
legend: {
useHTML: true,
enabled: true,
reversed: false,
itemWidth:120,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
"textOverflow": "ellipsis"
},
},
API: https://api.highcharts.com/highcharts/legend.itemWidth
Live demo:
https://jsfiddle.net/BlackLabel/ef8rjkmL/
I've got a chart where there are multiple yAxes and labels that overlap. I cannot instantiate them with different x values because I've got a UI that will switch the axes on and off, so that would leave weird spacing to one of the labels. I want to use formatter to detect if the label is not a first label and then change the x value then, but I have trouble finding how to change the value in formatter callback. Below is my code
{
title: 'Count',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'right',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
}
},
opposite: true,
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
{
title: 'Cost',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'left',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
},
formatter: function() {
if ( this.isFirst ) { console.log("first") }
this.attr({ x:44 })
}
},
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
Any ideas?
Both of your yAxis should have order in which you want to show them.YAxis needs to be stacked. Use
yAxis:0, //for first series
yAxis:1 //for second series
I Will add a fiddle in few mins.
I'm using a custom HTML tooltip with Highcharts and would like to remove the arrow, e.g. see the tiny arrow over the blue bar:
These are my settings for the current tooltip:
useHTML: true,
shadow: false,
borderRadius: 0,
borderWidth: 0,
backgroundColor: "rgba(255,255,255,1)",
style: {
padding: 0
},
shared: true
Use option shape
shape: "square"
Highcharts reference
As you can see in the jsfiddle example, the legend symbol is not aligned with the legend text.
Is there a way to set some padding or margin so the text can be vertically aligned to top or something?
http://jsfiddle.net/daxu/md2zk/62/
legend: {
layout: 'vertical',
itemMarginTop: 20,
symbolHeight: 5,
symbolWidth:5,
itemStyle: {
color: 'black',
fontFamily: 'DINPro',
fontSize: '7.8409px',
fontWeight: 'normal',
display:'inline-block',
verticalalign:'top'
},
align: 'right',
verticalAlign: 'middle',
floating: false,
x: 0,
y: 0
},
You have to set both legend: {useHTML:true, itemStyle: {lineHeight:"10px"}}
The lineHeight will change the text alignment to what you need. it worked in my case for horizontal legend.
See http://jsfiddle.net/md2zk/176/
Set useHTML flag as true in the legend.
Example: http://jsfiddle.net/md2zk/63/
How do I make a slight shadow or color come up below the x axis for zero valued points in column charts?
Right Now nothing is shown.
Setting the minPointLength property makes a line come up above the x Axis.
Any help or pointers would help.
Below are my options:
plotOptions: {
column: {
shadow: false,
pointWidth: 11.5,
borderWidth: 0.5,
enableMouseTracking: false,
minPointLength: 1
}
},
yAxis: {
labels: {
align: 'left',
style: {
color: 'gray',
fontWeight: 'normal',
fontSize: '8.5px',
fontFamily: 'Arial'
}
},
minorGridLineWidth: 1,
minorTickInterval: 10000,
minorGridLineColor: 'white',
minorTickWidth: 0,
title: {
text: '',
rotation: 270.0,
style: {
fontWeight: 'normal'
},
margin: 20,
style: {
fontWeight: 'normal',
fontFamily: 'Arial',
color: '#666666',
fontSize: '11px'
}
},
opposite: true,
min: 0,
max: 500000,
tickInterval: 100000,
gridLineWidth: 0.0
}
This gives me a 1px point above x Axis.
But what I am looking for is a small shadow/1px point below the xAxis.
The only way I have found to accomplish something like this is to convert 0 values to negative values (I have most often done something where I have a very small column that goes from -1 to 1, straddling the 0 line)
How large of a spread your data has will determine what negative value you need to specify.
http://jsfiddle.net/jlbriggs/JVNjs/307/
data: [7,12,16,-1,32,64]
{{Edit:
updated example with startOnTick:false - http://jsfiddle.net/jlbriggs/JVNjs/309/