I am just starting to learn EXT JS and I've tried combing through the tutorials but don't seem to find much luck with my problem. My issue is that I have a bar chart, and I wanted to rotate the labels to allow for more space. I can rotate them fine, but it appears that the point of rotation is based on the middle of the label. I'd prefer for the end of the label to line up with the mark for that specific column.
Here's a picture if that didn't make sense:
What I have:
What I want:
It seems like what I want to achieve is a pretty standard thing, but I can't seem to find much about the issue.
snippet of code:
{
xtype : 'cartesian',
store : 'Store1',
height : 350,
width : 390,
flipXY : true,
axes : [
{
type : 'category',
position : 'left',
label : {
rotation : {
degrees : -15
}
}
},
{
type : 'numeric',
position : 'bottom'
}
],
series : [
{
type : 'bar',
xField : 'cName',
yField : 'cNumber',
colors : ['#99CCFF'],
label : {
display : 'outside',
field : 'cNumber'
}
}
]
}
You can set textAlign: 'end', change the label config to:
label: {
textAlign: 'end',
rotation: {
degrees: -15
}
}
EDIT
After playing around with the label config, hope this is what your looking for:
label: {
textAlign: 'end',
textBaseline: 'hanging',
x: -10,
y: -10,
rotation: {
degrees: -15,
centerX: -5
}
}
Working example: https://fiddle.sencha.com/#fiddle/uea
Related
Who's gonna tell me, how to make correction of label positioning depends on value and angle in Highcharts Polar chart?
Please take a look at pictures:
Example 1: Here you can see, that angle values are displayed on bottom half is not positioned well - labels aren't have so much distance from the circle of outer graph line like the top ones.
Example 2: Angle values labels are displayed like they are moved a little bit to the right and labels at down is moved up a little bit too - the same as in example 1.
I'm using library Highstock v5.0.12. and here is fragment of my js code:
xAxis: {
tickInterval: 30,
min: 0,
max: 360,
labels: {
formatter: function() {
return this.value + '°';
},
style: {
"fontSize": "1.1vw",
},
distance: 15,
}
},
Creating solution using documented example and updating with existing code.
Solution is to update with useHTML and align property
xAxis: {
tickInterval: 30,
min: 0,
max: 360,
labels: {
formatter: function() {
return this.value + '°';
},
style: {
"fontSize": "1.1vw",
},
distance: 15,
useHTML: true,
align: 'center'
}
},
Fiddle
You can you xAxis.labels.y option for this:
labels: {
y: 6,
formatter: function() {
return this.value + '°';
},
style: {
fontSize: '20px'
}
}
Live demo: http://jsfiddle.net/kkulig/36k19Lhp/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.y
Recently I met a very strange problem when using highchart stock(highstock.js). I load some data points which containing Saturday data point. When application runs, at first it looks like this:
No graph appear, only the navigator and the time axis label. However, when I drag the navigator to the full size, the graph appear, but the x-axis time label disappear, it looks like this:
I have built a plunker here: graph disappear when met weekend data point link
some main configuration codes are as below:
scrollbar : {
barBackgroundColor : 'gray',
barBorderRadius : 7,
barBorderWidth : 0,
buttonBackgroundColor : 'gray',
buttonBorderWidth : 0,
buttonArrowColor : 'yellow',
buttonBorderRadius : 7,
rifleColor : 'yellow',
trackBackgroundColor : 'white',
trackBorderWidth : 1,
trackBorderColor : 'silver',
trackBorderRadius : 7,
// enabled: false,
liveRedraw : false
},
navigator : {
xAxis : {
labels : {
formatter : function(e) {
console.log("value : " + this.value);
console.log("value :" + typeof this.value)
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
handles : {
backgroundColor : '#808080'
},
//margin : -10
},
xAxis : {
type : 'datetime',
tickLength : 0
},
Can anyone tell me why?
I have found the true reason. It is not because the weekend data point, but because the data is not sorted in time ascending order.
I am trying to plot a heatmap using highcharts api using the following chart options:
{
chart : {
renderTo : 'chartContainer',
type : 'heatmap'
},
title : {
text : "abcd"
},
xAxis : {
categories : []//categories,
tickWidth : 0,
title : {
text : "Months"
},
},
yAxis : {
categories : []//categories,
lineWidth : 1,
title : {
text : "xyz"
}
},
colorAxis : {
min : minValue,
max : maxValue,
gridLineWidth : 2,
marker : null,
tickWidth : 0,
tickInterval : tickInterval
},
legend : {
align : 'right',
layout : 'vertical',
verticalAlign: 'middle',
symbolHeight : 250
},
tooltip : {
enabled : false
},
navigation : {
buttonOptions : {
verticalAlign : 'top',
y : -10
}
},
series : [] //series data
};
But legend is somehow cutting at the top. Please check the following snapshot:
Chart Screenshot
I tried the different combinations of legend options mentioned in http://api.highcharts.com/highcharts#legend
Also, tried increasing the height of the chart container.
Still, the legend is still cutting at the top.
Any help/suggestions?
Finally, the issue got resolved. It was occurring because of the 'symbolHeight' property of the legend. I reduced it to 150 and the legend stopped cutting off.
for me, the answer was to increase the legend:itemMarginTop to 20;
For me, it worked by slightly reducing the font-size.
legend:{
itemStyle: {
fontSize: "10px"
},
}
For this, I also had to change the symbolHeight to adjust it according to my font size.
Font size defaults to 12px.
Ref: https://api.highcharts.com/highcharts/legend.itemStyle
Hope this helps. Peace.
I can't explain this behavior :
Sometimes, my charts are displaying the first or the last label of the axis with a lot of decimals.
In my graph options, here is how the yAxis look like :
yAxis : [{
alternateGridColor: "white",
gridLineColor : "#E3E3E3",
lineWidth: 2,
tickLength : 5,
lineColor : '#A5A5A5',
tickWidth : 2,
tickLength : 5,
tickColor : '#A5A5A5',
labels : {
style : {
fontWeight : 'bold',
fontSize: '10px'
},
x : -labelMargin
},
tickPixelInterval: 20
},
//more axis
]
How to fix that ? Any help appreciated.
You did not mentioned what should be the value of your labels so it uses the naive value for them that could be float number generated by a division perhaps.
I suggest you to handle your labels manually something like this:
labels: {
formatter: function () {
return Math.floor(this.value)
}
}
As you can see i use floor() function to remove decimals.
I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.
Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.
Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}
Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/