I am using HighCharts (horizontal) bar chart. This chart is very long down my page, which is fine, and so I was hoping to have the legend show up at the top and bottom of the chart. Is this possible? I cannot find in the API how to do this.
Thanks for any tips.
You can add extra legend by CSS / html styles.
http://jsfiddle.net/Ecrww/109/
$(chart.series).each(function(i, serie){
$('<li style="color: '+serie.color+'">'+serie.name+'</li>').click(function(){
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend')
})
Try removing the following code
legend:
{
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
......
......
}
which makes the legend to default position
I also got it and found this way to solve it
try adding these code in options:
chart: {
marginTop:-10//for top position
},
hope it helps you
Related
As I am forcing Highcharts to show the last label on the xaxis, this last label is partially hidden, or partly disappears:
Why is that? And what can I do? Setting the »marginRight« in the »chart« settings does not do the trick.
Thanks for any hints.
You can set align: 'right' attribute for the last label:
chart: {
events: {
render: function() {
var ticks = this.xAxis[0].ticks;
Highcharts.objectEach(ticks, function(tick) {
if (tick.isLast && tick.label.xy.opacity) {
tick.label.attr({
align: 'right'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/tv5f0x2a/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.objectEach%3CT%3E
This might be the chart container width being too small, or the chart itself is too small.
You should try:
have you tried changing chart width? https://api.highcharts.com/highcharts/chart.width
try making the container for the chart wider
Can anyone tell me how to change caption of drilldown button at the top right of sunburst chart in highcharts? Please look at the image attached.
Found the answer by looking at the source code of sunburst.js.
series: [{
type: "sunburst",
data: data,
allowDrillToNode: true,
cursor: 'pointer',
drillUpButton: {
text: "< Back"
}
}}
drillUpButton property changes the text of the drill up button in Sunburst chart in highcharts.
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
I have tried,borderWidth, borderColor. But did not able to find to just add border bottom to single item in legend.
Thanks in advance..!!!
Set useHTML and then use HTML tags with CSS in formatter.
if you only want to underline an item you can use labelFormatter like this:(http://jsfiddle.net/L4D5U/)
legend: {
labelFormatter: function() {
return '<div style="text-decoration: underline">'+this.name+'</div>' ;
}
I have a highstock chart with many series. I placed the legend with series names below the chart. The problem is that I cannot know in advance which is the height of the legend, and sometimes it happens to be soo large that it overwrites the graph above.
Is it possible to adapt the size of the graph to the size of the legend in javascript code? Best solution for me would be to keep fixed the size of the graph and enlarge the height of enclosing element.
edit:
a jsfiddle which resembles my situation: http://jsfiddle.net/KfWDD/1/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
legend: {
enabled: true,
},
rangeSelector: {
selected: 1
},
series: [{
name: 'ADBE',
data: ADBE
}, {
name: 'MSFT',
data: MSFT
}]
});
I would like to have the legend below the navigator. I can obtain this by fixing some margins and offsets in the elements, but then the layout breaks if the legend becomes too tall.
You can set maxHeight for the legend, and add fixed margin to make some space for that legend.