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.
Related
I want to draw a line on a ohlc chart, but i dont want the new series to introduce gaps.
The first series (ohlc) should still place the candles in an nica way with constant gaps between them regardles of open-close times (i think its only the "ordinal" value that does this, but unfortunatelly you cant specify it at series level, but only axis level).
xAxis: {
ordinal: true
},
example:
http://jsfiddle.net/5r97owky/8/
Thank you for any help
The gaps are caused by ordinal option. You can create additional xAxis for line series:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var xAxes = this.xAxis,
extremes = xAxes[0].getExtremes();
xAxes[1].setExtremes(extremes.min, extremes.max, true, false);
}
}
},
xAxis: [{}, {
visible: false
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/1mbo2zp4/
API: https://api.highcharts.com/highstock/xAxis.ordinal
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 have two highcharts on one page one of the charts can add and remove a second or thrid yAxis dynamicly. When this is done of course the width of the xAxis is shorter than the one with only one yAxis.
Now i want to sync the width of the xAxis to keep both charts underneath each other.
When I try the set xAxis width the width is changed but the chartarea is sticking to the left and not to the right.
How can I get draw both chart-areas with the same dimensions?
Here is a fiddle with a small example: Fiddle Fiddle
Best
MrLight
You can use top, width and offset properties to size and position axes. First two of these are not documented but they work.
Live demo: http://jsfiddle.net/BlackLabel/cvey8ap8/
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'],
width: '90%',
left: '8%',
// Categories for the charts
},
yAxis: [{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple Consumption' // Title for the yAxis
},
left: '7%',
offset: 0
},
{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple12 Consumption' // Title for the yAxis
},
offset: 0
}
],
I use Highcharts to visualize 3D charts in my project. Particularly I am interested in showing a 3D scatter plot like this. Below the chart you can see the options as well as the respective jsFiddle.
Is there a possibility to display a label with every point's name always i.e. that hovering is not required?
Thanks!
Within the series you can enable the datalabels like this:
series: [{
dataLabels: {
enabled: true,
},
}]
http://jsfiddle.net/oghokm8w/1/
then you could use the formatter to customise the text to be displayed:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
return this.point.x;
},
}
}]
Do anyone know which setting in hightcharts can change the width that marked with red arrow as example?
Please take a look at the image below
I want to set the width of the red arrow as example
You are using categories, so axis is divided evenly between all existing categories. In other words, you can simply remove unnecessary categories, for example: http://jsfiddle.net/mwqto4n6/
$('#container').highcharts({
xAxis: {
categories: ["2016", "2025"]
},
series: [{
type: 'column',
data: [200, 120]
}]
});