I'm trying to align a legend at the bottom right in highstock. It used to work until I was forced to upgrade to highstock 1.3.4.
The problem is that now the navigator is covering the legend. This is not ideal:
http://jsfiddle.net/sy8dE/
I'm aligning the legend as follows:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align: 'right'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
How can I get the navigator to NOT cover the legend?
In addition to specifying the alignment of the legend, you can also offset it using x and y offsets. For instance, in your case you could move it down a bit like this:
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
http://jsfiddle.net/kqvNJ/
The other legend options are specified here: http://api.highcharts.com/highcharts#legend.y
Related
In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
I'm using highcharts to plot out a line graph of quite a few sections. I want the legend to be static at the bottom of the graph area. The height of the graph area can be fixed but the legends can change dynamically.
I'm using the below options in for legend object
legend: {
useHTML: true,
enabled: true,
reversed: false,
verticalAlign: 'bottom',
floating: true,
align: 'center',
padding: 10,
margin: 20,
itemDistance: 10,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
},
itemMarginBottom: 10,
x: 0,
y: 100
},
I have replicated it in the fiddle
https://jsfiddle.net/x496tLmf/1/
Is there any way to fix this and have the legends stuck to the bottom. All of them need to display as the graph will be exported as static image.
There are two main issues why the legend overlaps the chart:
When you manually set the chart margin, the chart won't reserve space for the legend.
When you enable the legend floating option, you explicitly allow legend for overlapping
API: https://api.highcharts.com/highcharts/legend.floating
The solution here is to remove the properties mentioned before and let the chart calculate the position of the legend.
However when you want to export this chart as a static image with all the legend items you have to specify the size of each element together with some overflow style to cut them a bit.
You might also reduce the spacing in between them, to increase the chart area.
legend: {
useHTML: true,
enabled: true,
reversed: false,
itemWidth:120,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
"textOverflow": "ellipsis"
},
},
API: https://api.highcharts.com/highcharts/legend.itemWidth
Live demo:
https://jsfiddle.net/BlackLabel/ef8rjkmL/
How do I prevent labels from wrapping in Highcharts styled mode? A partial solution that I found is to use the useHTML flag and set white-space: nowrap; with css, but then the labels are rendered on top of the tooltip. If I set useHTML to false, then highcharts automatically adds line breaks. I've included a code snippet to illustrate the problem. Just run the snippet and hover your mouse over the bottom bar.
Highcharts.chart('container', {
chart: {
type: 'bar',
borderWidth: 1
},
title: {
text: 'No space reserved for X axis labels'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: ['Product 1', 'Product 2', 'Yet another product with a long label'],
labels: {
rotation: 0,
align: 'left',
reserveSpace: false,
x: 2,
y: -5,
useHTML: true
},
tickWidth: 0
},
series: [{
data: [39.9, 71.5, 50.4],
dataLabels: {
enabled: true
}
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-axis-labels span {
white-space: nowrap!important;
}
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
To make it work with styled version of Highcharts, you can wrap addLabel function of Tick prototype. Take a look at the example below.
Example:
http://jsfiddle.net/vsy8abLb/
Is it possible to hide the yaxis and the series with klick on a series in the legend?
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
cheers
You need to use showEmpty as false.
I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.
How do I make highcharts to make normal horizontally scrollable graph?
Here is what I am using right now:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
//CODE FOR HIGHCHARTS JS
function makeChart() {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Banana',
x: -20 //center
},
subtitle: {
text: 'Source: banana.com',
x: -20
},
xAxis: {
categories: xlist
},
yAxis: {
title: {
text: 'No. of C'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: $("#repoSelector option:selected").text(),
data: ylist
}]
});
}
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations here.
Here I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here.
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
Use
require('highcharts/highmaps') instead of require('highcharts') in imports<br>
#NgModule({<br>
...<br>
imports: [<br>
BrowserModule, <br>
ChartModule.forRoot( <br>
require('highcharts/highmaps')<br>
],<br>
})