Develop Reference

Number of legends per page on pagination in Highcharts

Hi I am using Highcharts. In one of the chart I have too many legends so there is an overflow. In this scenario Highcharts is rightly adding pagination arrow as shown in attached pic. My question is how can I control number of legends per page. I need only 4 legends per page when pagination occurs. I could not find anything in highcharts doc. Please help. [

There is no API option to set the number of series showing at the legend.navigation but you can control it using legend properties, such as itemWidth, maxHeight and other options for styling legend. You can also use responsive.rules for more precise settings.
Example config:
legend: {
align: 'center',
itemMarginTop: 1,
useHTML: true
},
responsive: {
rules: [{
condition: {
maxWidth: 500,
},
chartOptions: {
legend: {
width: 250,
itemWidth: 125,
maxHeight: 60
},
}
}
]
},
Demo:
https://jsfiddle.net/BlackLabel/j6gn1uto/
API Reference:
https://api.highcharts.com/highcharts/legend
https://api.highcharts.com/highcharts/responsive.rules

Draw horizontal target line using EChart.JS

I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).
There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?
Thanks in advance.

[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]
The option markLine is designed for that, see documentation here:
https://echarts.apache.org/en/option.html#series-line.markLine
Note that there are different uses for it, and different options to provide, depending on what you want to draw:
arbitrary line on the canvas (any size, any direction, any style)
lines matching data caracteristics (min, max, average)
horizontal/vertical lines
You have to use the attribute markLine.data in all cases, and description of specifics is described here:
https://echarts.apache.org/en/option.html#series-line.markLine.data
Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/
Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.

HighCharts: Bar columns don't reach x-Axis on drill up

I am struggling with a HighChart/HighStock problem. I have created a JSFiddle to explain my problem! When the user uses a drill down on one of the bar colums, the y-axis may shrink which causes the x-axis to get higher. This is no problem, but when the user goes back to the overview through a drill up, the previous x-axis length is implemented for the bar columns, while the x-axis gets lower. I can't find anything in the documentation to help my problem and I haven't found a similar problem.
The drilldown which I am using:
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#D2D2D2'
},
select: {
stroke: '#039',
fill: '#D2D2D2'
}
}
}
},
series: [{"data":......}]
}
Could someone please help me adjust the code so that on the drill-up event the bar columns are re-configured to reach the x-axis

It looks like it is a bug with drilldown animation which appears only when a navigator is enabled. Reported here.
Should work without the animation:
drilldown: {
animation: false,
example: http://jsfiddle.net/3e3xqv7e/47/
In general, I think a navigator was not meant to work with drilldowns, so making it work correctly might be tricky. An option series.showInLegend works, though, except the min/max of the navigator are changed after drillup - so you need to set it properly.
drillup: function (e) {
this.navigator.xAxis.setExtremes(0, 4, true, false);
/* this.navigator.xAxis.update({
min: 0,
max: 4
}, true);*/
}
example: http://jsfiddle.net/c1nqpz7d/2/

How do you position the x-axis labels along the line y=0 using Highcharts?

I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/

crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.

Highcharts: Only animate pie size with donut graph / prevent innersize animation

Fiddle: http://jsfiddle.net/jakelauer/ZENuS/
Highcharts JS call:
$(function () {
$('div').highcharts({
chart: {
backgroundColor: 'rgba(0,0,0,0)',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 500,
height: 500,
margin: [0, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
pie: {
minSize: 0,
size: 500,
animation: {
duration: 5000,
easing: 'linear'
}
}
},
series: [{
type: 'pie',
innerSize: 486,
data: [1]
}]
});
});
As you can see in the fiddle, while the graph grows, the thickness of the line animates as well as the percentage of the circle it takes up. I'd like the line to stay the same thickness the whole time, and only change how much of the circle it fills. Is this possible?

The Highcharts API only provides options to calibrate the duration and easing of this animation, as you've already seen. The default "scaling" animation into the charts final height/width and thickness of its "donut" cannot be altered. You either have no animation (animation: false) or this "scaling" animation with control over the duration and easing. Like I said, these are the limitations that exist within the Highcharts API; I cannot speak to the feasibility of coming up with some magical workaround via the jQuery UI or any other framework.
In summary:
no?

Unfortunately this option is not possible, but you can request your proposition on http://highcharts.uservoice.com/