Develop Reference

How to change labels axis position of dynamic data values that are showing around the chart. I'm using Highcharts here

I want to change the axis position of data label 6.02%. How do I change it because this data is dynamic. Here's my code :
Highcharts.chart('container' + this.random, {
credits: {
enabled: false
},
title: {
text: this.graphtitle,
align: 'left',
style: {
fontSize: '12px',
},
},
chart: {
height: this.graphheight,
width: 500,
animation: false,
backgroundColor: 'transparent',
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#000',
align: 'left',
format: '{point.y} %', // added percentage sign here
overflow: 'justify', // prevent labels from being cut off
distance: 10, // increase distance between labels
x: -40,
y: -20,
//css
style: {
fontSize: '10px',
textOutline: 0,
},
connectorWidth: 0,
},
animation: true,
showInLegend: true,
},
},
yAxis: {
labels: {
staggerLines: 2,
enabled: true,
align: 'left',
padding: 0,
reserveSpace: true
},
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'right',
symbolHeight: 10,
symbolRadius: 0,
symbolPadding: 1,
itemMarginTop: 10,
itemMarginBottom: 5,
textOutline: 0,
itemStyle: {
fontSize: '10px',
textOutline: 0,
}
},
series: [{
enableMouseTracking: false,
type: 'pie',
innerSize: '65%',
colors: this.graphcolors,
data: this.graphdata,
},],
});
},
below is the visual of pie chart:
I was trying this method but it's not working with my code any other method anyone would like to suggest ?
chart.series[0].data[1].update({
dataLabels: {
align: 'center',
verticalAlign: 'middle',
inside: true
}
});

I suppose graphdata here is dynamic data passed as a props. I came across a similar kind of bottleneck recently.
What I did to resolve this error is following:
You can sort your data ascending or descending using life cycle hooks e.g. getting the highest value element at 0 index or getting the lowest value element at 0 index.
data property of series in high charts expects a object with name and other custom properties to app where graph data has values like
['value 1', 1],
['value 2', 2]
{
                  name: this.graphdata[0][0],
                  y: this.graphdata[0][1],
                  sliced: false,
                  selected: true,
                  dataLabels: {
                    x: -25,
                    y: -15
                  }
                },
               {
               name: this.graphdata[1][0],
               y: this.graphdata[1][1],
               sliced: false,
               selected: true,
               dataLabels: {
                 x: -60,
                y: -25
               }
},
  this.graphdata[2],
   ],`enter code here`

In your code, you put negative values for plotOptions.pie.dataLabels.x and plotOptions.pie.dataLabels.y. This is probably not the best strategy if you push data dynamically...
When you use setData() to update your series, Highcharts optimizes labels position automatically.
Here is a simple example:
let chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
innerSize: '65%',
dataLabels: {
format: '{point.y}',
distance: 10
}
}
},
series: [{
colors: ['red', 'green', 'blue'],
data: [10, 20, 15]
}]
});
function getInt() {
return chance.integer({ min: 1, max: 100 });
}
document.querySelector('button').addEventListener('click', () => {
chart.series[0].setData([getInt(), getInt(), getInt()]);
});
#container {
width: 350px;
height: 350px;
}
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chance#1.1.9/chance.min.js"></script>
<div id="container"></div>
<button type="button">Update</button>

How can i show the connectors for my 3d funnel?

Click to see the image I am facing an overlap problem regarding my 3d funnel using highcharts. I have also attached an image showing the problem. hope it might help you to debug
I've already tried the api reference as per the highcharts documantation
function sales_funnel(key_val, response) {
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts.chart('funnel_container', {
chart: {
type: 'funnel3d',
options3d: {
enabled: true,
alpha: 10,
depth: 50,
viewDistance: 50
}
},
title: {
text: 'Sales Funnel'
},
plotOptions: {
funnel3d: {
label: {
enabled: true,
connectorAllowed: true,
connectorNeighbourDistance: 30
},
},
series: {
dataLabels: {
enabled: true,
format: '{point.name} ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
},
neckWidth: '30%',
neckHeight: '25%',
width: '80%',
height: '80%'
}
},
series: [{
name: response[1],
data: key_val
}]
});
}[enter image description here][1]

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...

HighCharts dual x-axis with percent and date

I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.

You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks

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/