I have this chart http://www.highcharts.com/demo/column-rotated-labels. How could I put the text from the index label outsaid columns.Thank you!
I believe you are asking how to move the labels from within the columns to outside, correct?
Unfortunately, those values from inside the column are not index labels, but dataLabels. So they are representing the values of the columns. I moved them by modifying the x property int the "dataLabels" section of the high chart. You can view how I did it at this jsfiddle:
http://jsfiddle.net/cpnq5fou/
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
x: 12, //12 pixels to move it to the right of the column, instead of inside
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
Related
I have a strange behavior.
the chart (line) is displayed all well, but the X axis labels (dates or time and date) are displayed on the left of the tick and not below it as it should be. I have tried all possible settings, but nothing helps. the tick is displayed in the right location, and the box of the label (colored in red) is displayed in the right location but the content of the label is on the left side.
this is the settings for the X axis:
axisX: {
interval: 3600 * 3,
gridColor: 'lightgrey',
tickColor: 'lightgrey',
labelFormatter: e => {
if(e.chart.axisX[0].dataInfo.max - e.chart.axisX[0].dataInfo.min > (86400000 * 5))
return moment(e.value).format('D.M');
else
return moment(e.value).format('HH:mm D.M');
},
crosshair: {
enabled: true,
color: '#244D85',
snapToDataPoint: false,
label: ''
},
lineColor: 'transparent',
labelFontSize: 15,
labelAngle: 0,
margin: 10,
labelBackgroundColor: '#942626',
labelAutoFit:true,
labelWrap: true,
}
I have deliberately set the label background to red , so it will be more visible (the problem).
Image is attached to show the problem.
Please help, I'm out of ideas.
Is it possible to reduce the space between the number and icon? I am using angular 8 and highchart. Below is the chart legend config.
this.legend = {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
symbolRadius: 0,
symbolHeight: 8,
reversed: true,
padding: 3,
itemStyle: {
color: '#000000',
fontWeight: 'normal',
fontFamily: 'Roboto'
}
};
You are searching for symbolPadding option
The pixel padding between the legend item symbol and the legend item
text.
Defaults to 5.
legend: {
symbolPadding: 1
}
https://jsfiddle.net/aswinkumar863/s5d0ry2t/
I am using two xAxis and three yAxis in this example. As you can see the data labels for the two purple lines show as expected. But when you change the zoom level to anything more than 3m, the dataLabels hide.
I am using:
dataLabels: {
enabled: true,
allowOverlap: true,
align: 'left',
verticalAlign: 'top',
x: 0,
y: -18,
zIndex: 1000,
crop: false,
overflow: 'none',
inside: true,
padding: 0,
maxPadding: 0,
formatter: function() {
return 'Other';
}
}
for one, and just allowOverlap: true for the other. None of them seem to work. Any suggestions?
The issue is caused by dataGrouping, which group points when you set range above 3m. The solution is define formatter in plotOptions.series object, instead of point.
I'm trying to draw x-axis gridlines on each y-axis of the chart. Right now the x-axis gridline extends through all of the y-axis with no separation or stops between each y-axis.
Here is how I'm getting now
the code for the x-axis
xAxis: {
gridLineWidth: 5,
minTickInterval: 24 * 3600 * 1000,
lineColor: '#000',
tickColor: '#000',
startOnTick: true,
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
How can I prevent the line from extending to all the chart i.e. on all y-axis. This is what I want it to be like
Please let me know how can I achieve the desired result. I will appreciate any help.
Thanks,
Maxx
It's interesting, because this is how it works in Highstock 1.3.10, see: http://jsfiddle.net/4qGKE/
xAxis: {
gridLineWidth: 1
},
However Highcharts doesn't support this for now ( see: http://jsfiddle.net/4qGKE/1/ ) .
I don't think you can, in actuality.
Several possible ways around it:
using the renderer to draw a box over each area to hide them
set up each gap as another y axis, and use a white plotBand to hide them
None of them are clean, but...
I want to trim in extra edges from the xAxis .
I am using end on tick and start on tick to achieve that but somehow it seems that highcharts is ignoring that.
Here is the (fiddle)
Options Set
xAxis: [{
gridLineWidth: 2,
lineColor: '#000',
tickColor: '#000',
gridLineDashStyle:'ShortDash',
categories:xAxisCategories,
gridLineColor:'#000',
tickmarkPlacement:'on',
endOnTick: true,
startOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
title: {
text: null
}
}],
labels: {
enabled: false
},
title: {
text: null
}
}],
I think you mean startOnTick. Anyway, that works exactly as should - note, you are using categories, that means plotting area is divided for categories equally (docs). One tick = one category = one part of plotting area (for example width = 20px).
You have two options:
don't use categorized axis (quite a lot of questions on SO are mentioning this - search for start/endOnTick or min/maxPadding with categories)
set start/endOnTick to false, min to (-0.5), max to (categories.length-0.5) and should work (-0.5 etc. may be different a little).