Highcharts legend is cutting off - javascript

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.

Related

How to set 2 y-axis title (and/or label) on chartjs?

I know that setting a title or a label on chartjs' charts takes only a few properties on chart options.
...
yAxes: [{
scaleLabel: {
display: true,
labelString: "My Chart"
}
}]
...
but, is there anyway to set 2 title/label on chartjs ? I'd like to add some sort of a sub-title.
There is no option for yAxes subtitles but you can use a secondary yAxis properly configured:
scales : {
yAxes : [{
scaleLabel : {
display : true,
labelString : "subtitle",
fontStyle : 'italic'
}
}, {
display : true,
gridLines : {
display : false,
color : 'transparent'
},
ticks : {
display : false
},
scaleLabel : {
display : true,
labelString : "My Chart title",
fontStyle : 'bold',
fontSize : 14
}
}
]
}
Check this fiddle: https://jsfiddle.net/beaver71/jg7Lgc43/

How to display negative values below the x-axis in C3.js

This is how I want it to look like negative values below x-axis and negative values wrapped in circular brackets.
C3.js Code
var chart = c3.generate({
bindto : "#totalDollarFlow",
size : {
height : 400,
width : 700
},
title : {
text : data.title
},
data : {
x : labels,
columns : data.columns,
axes : {
data1 : 'y',
},
type : 'bar',
types : {
data1 : 'line',
},
names : {
},
colors : {
data1 : '#2ca02c',
},
selection : {
enabled : true,
draggable : false,
multiple : true,
grouped : true
}
},
subchart : {
show : false
},
point : {
show : false
},
zoom : {
enabled : true,
rescale : true
},
grid : {
y : {
show : true
}
},
regions : [ {
axis : 'y',
start : 186,
end : 187,
class : 'regionY'
} ],
axis : {
x : {
type : 'category',
tick : {
rotate : 90,
centered : true,
fit : true,
multiline : false,
culling : {
max : 60
}
},
},
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format : d3.format("$,")
}
},
}
});
How the chart looks like at present.
I'm not sure if everything you want is possible but at least you can get close to it. For your y-Axis you can use this format:
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format: function (d) {
const realNumber = d*1000000;
return realNumber.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
}
}
To get a line at 0 you can define a grid-line for the y-axis at position 0. You can also set a text here, but only one text to describe what this line is for and not like your ticks. I think this is even better than having the timestamp floating in your chart.
grid : {
y : {
show : true,
lines: [
{value: 0},
]
}
}
This line might be a little bit thin, but you can make it thicker when you change its css. I think it was c3-ygrid-line. To get more information you can always use the reference

highchart stock : graph disappear when containing weekend data point

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.

chart catergory label will only rotate from the center?

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

Highcharts : trouble with axis Label

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.

Categories