Develop Reference

How to add text on every section edges in funnel highcharts

With help of my previous question, I'm able to set equal heights for all the sections to the funnel. How can I add some extra texts to the edges(right) of every section. I did not find any documentation for this. My expected funnel chart as follows:
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
softConnector: true,
inside: true,
},
neckHeight: "0%",
neckWidth: "80%",
width: '15%',
reversed: true,
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
dataLabels: {
inside: true
},
center: ['50%', '50%'],
width: '100%'
}
}
}
}]
}
});
jsfiddle Example: https://jsfiddle.net/kiranuk/xhfbyj64/
Thanks for the help.

For adding extra text on the chart use Highcharts. SVGRenderer
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Sample code:
chart: {
type: 'funnel',
events: {
render: function() {
let chart = this,
point1 = chart.series[0].points[4],
x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;
if (!chart.myCustomText) {
chart.myCustomText = chart.renderer
.text('1% <br> Did')
.css({
fontSize: '10px',
zIndex: '3px'
})
.add();
}
//pdate text coordinates
chart.myCustomText.attr({
x: x,
y: y
})
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/kLyt6ngs/

How to add legend to a 3D scatter graph using Highcharts?

I am trying to add a legend to a 3d graph using highchart but i am unable to do that..How can i achieve that ?
Below is the jsfiddle code
jsfiddle
Below is the code i added for legend but its not working...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter3d',
animation: false,
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 150,
viewDistance: 5,
}
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
categories: snr,
title: {
text: null
},
labels: {
format: '{value:.2f}'
}
},
xAxis: {
type: 'category',
categories: mac,
title: {
text: null
}
},
zAxis: {
// categories: count,
min: 0,
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25
},
legend :{
enabled : false
},
series: [{
name: 'Reading',
colorByPoint: true,
});
Please guide me to display the legend in the 3d graph...

MACD indicator is not working in highstock

I'm trying to change graph indicators on a button click. I've integrated 4 indicators sma, boilinger band, ema and macd. First 3 are working but macd is not working.
Here is the fiddle
Highcharts.stockChart('container', {
plotOptions: {
candlestick: {
color: '#66a6ff',
upColor: '#3c68a7'
},
column: {
color: '#D3D3D3'
}
},
rangeSelector: {
selected: 1
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
height: '70%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
top: '70%',
height: '30%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: getSeries(coinFullName, coin, currency),
credits: false
});
}
Here's the snippet you can search in fiddle:
if($("#indicatorType").val() == 'macd'){
series.push({
name:'MACD',
type: 'macd',
linkedTo: 'primary'
});
}

Thank you for reporting.
I isolated demo with MACD here:
http://jsfiddle.net/BlackLabel/swc4sj36/
and it seems that the issue is related with this specific data. I created a new case in our bugtracker here:
https://github.com/highcharts/highcharts/issues/7788

I want to make the spline chart from highcharts.com smaller in size

I want to minify the chart Interface. Currently I am using chart with size 600 x 300 px, which is working fine.
Now I want to show 3 charts at the same place so in order to save space. I want to show 3 charts thumbnails (working charts). If user click on any chart it should appear as full chart. I can show it on the popup or expand it on the page itself.
I checked the Highchart website. It provide option to resize chart using height & width properties.
http://api.highcharts.com/highcharts/chart.height
http://api.highcharts.com/highcharts/chart.width
This option do not actually resize the chart. Char layout get smaller but the title label stay at the same size. I want chart to resize and work in a smaller version with text and chart show in smaller box like 100 x 100 px.
I can use chart.setSize(); function to resize the chart.
Does it make any sense? Please guide me.
I am using highcharts 5.0 version js file.
Here is my code:
var seriesData1 = {
name: "Series1Label",
data: Series1Data
},
seriesData2 = {
"name": "Series2Label",
"data": Series2Data
},
seriesData3 = {
"name": "Series3Label",
"data": Series3Data
},
completedData = [seriesData2, seriesData3, seriesData1];
var elem = par.find('<some class>');
elem.highcharts({
chart: {
type: 'areaspline'
},
colors: ['#21d0b8', '#2248B5', '#5B82A1'],
title: {
text: ""
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
useHTML: true,
itemDistance: 5,
},
xAxis: {
'title': {
text: xAxisTitle
},
categories: categories,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
}
}
},
areaspline: {
fillOpacity: 0.8
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: completedData,
exporting: {
buttons: {
contextButton: {
text: 'Export',
useHTML: true,
align: 'right',
symbolY: 15,
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 100
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled:false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled:false,
},
title: {
text: null
}
},
title:{
text: '',
},
subtitle: {
text: null
},
tooltip:{
enabled:false,
},
legend:{
enabled:false,
},
credits: {
enabled: false
}
}
}]
}
});
The 'elem' chart element occurs 7 times on a single page, so I have made a single code to fill all the charts on different data and trigger them all at single function.
I need all the 7 charts to show in thumbnail and show certain chart in large size on user click.
using your example when I update my code.
var getChart = ele_.highcharts({.....});
Resize code:
getChart.setSize(100, 100);
Error encountered
getChart.setSize is not a function
Can anyone guide me how to fix this issue?

check responsive and set rules accordingly.
For 100 by 100 you should remove all gridlines, credits, labels, title
Example will be
Highcharts.chart('container', {
chart: {
type: 'line',
width: 100,
height: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled: false,
},
title: {
text: null
}
},
title: {
useHTML: true,
text: ''
},
subtitle: {
text: null
},
tooltip: {
enabled: false,
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#container').highcharts().renderer.text('mini Highcharts', 20, 90)
.css({
fontSize: '8px',
color: '#7d7d7d'
})
.add();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
check this using chart.setSize();
Fiddle
Update
You could use $(elem).highcharts().setSize(100, 100);
Updated fiddle

put the highchart legend to the bottom of the chart and horizontally centered

Im using highchart for my website that requires a chart and It renders good (no problem at all) however, due to conflict requirements, I want the legend to be put on the bottom (below the chart, move it from the right side to the bottom side) and make it horizontally centered anyone knows how to make it? I tried this (refer below)
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
my overall chart code is
$('#chart_portfolio').highcharts({
chart: {
borderColor: '#ff0000',
width: null,
height: null
},
title: {
text: false,
x: -20 //center
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center'
},
xAxis: {
categories: portfolio_creation_date //this is an array
},
yAxis: {
title: {
text: false
},
plotLines: [{
value: 0,
width: 1,
color: '#ff0000'
}]
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Future',
data: portfolio_future, //this is an array
color: '#0f00ff'
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period, //this is an array
color: '#fda800'
}, {
name: 'Arrears',
data: portfolio_in_arrears, //this is an array
color: '#f40404'
}, {
name: 'Good standing',
data: portfolio_good_standing, //this is an array
color: '#4da74d'
}]
}); //end of highcharts
but sadly not working. Please refer below image for a sharp detail.

Simply remove options, to use default ones: http://jsfiddle.net/ctfcnsrL/1/
legend: {
// enabled: true,
// floating: true,
// verticalAlign: 'bottom',
// align:'center'
},

Try this One
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center',
},
http://jsfiddle.net/ctfcnsrL/