We Keep Coding

Highcharts dynamically move dataLabel if it doesnt fit

Hi I am trying to present the columns values at the top of each column so it is easier for the user to compare values.
I have got this working but when some columns are very close to each other some of the values aren't being dispalyed because I'm presuming highcharts works out that it wqouldnt fit unless it overlapped so it doesnt show the value.
Here is the code for my chart -
var chart_1_Options = {
chart: {
renderTo: 'container_chart_1',
backgroundColor: '#FFFFFF'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
column: {
animation: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return '<p style="font-size: 8px;">' + this.y + '% </p>';
}
}
}
},
legend: {
enabled: true
}
};
Here is an image of what the chart looks like, I have circled areas where the value is missing
I just want the value to show even if it can't fit, I want it to place the value somewhere inside the column if it cant fit at the top.
Thanks for any help!

I think that you can try to find those labels and show them by doing something like code below:
events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
setTimeout(function() {
if (p.dataLabel.translateY === -9999) {
p.dataLabel.translate(p.dataLabel.alignAttr.x, p.dataLabel.alignAttr.y + 20)
p.dataLabel.css({
opacity: 1
})
}
}, 50)
})
}
}
Demo: https://jsfiddle.net/BlackLabel/unzgsmfr/
API: https://api.highcharts.com/highcharts/chart.events.load

How to Hide rest of the region when user clicks pie chart?

I have pie chart representation of user locations as below in figure 1,i have successfully made the representation working but how can i make the rest of users hidden as figure 2 when click any particular sector ?
Figure 1:
Figure 2:
Javascript :
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'users location'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Africa', 45.0],
['Asia', 26.8],
{
name: 'Australia',
y: 12.8,
sliced: true,
selected: true
},
['Europe', 8.5],
['North America', 6.2],
['Others', 0.7]
]
}]
});
});
Fiddle Link

You can use plotOptions.series.point.events.click function to tell the chart exactly what to do after the click of a slice:
series: {
point: {
events: {
click: function () {
var index = this.x;
$('.highcharts-series-group g path').toggle();
$('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle();
$('.highcharts-data-labels path').toggle();
$('.highcharts-data-labels path:nth-child(' + (index+1) + ')').toggle();
$('.highcharts-data-labels g').toggle();
$($('.highcharts-data-labels g').get(index)).toggle();
}
}
}
}
The first two toggles are for the slices themselves. $('.highcharts-series-group g path') refers to all the colored slices in the chart, and I changed back the one user just clicked by adding :nth-child.
The second pair of toggles are for the lines coming out of the slices connecting the datalabels to them. And the third pair is for the datalabels.
Here's the DEMO.

And example in pure Highcharts. As an another answer, use pie.point.events.click handler, to hide/show elements: http://jsfiddle.net/5oLmj00L/8/
point: {
events: {
click: function() {
var _self = this,
undef,
method = _self.clicked ? "show" : "hide";
Highcharts.each(this.series.data, function(p, i) {
if(p !== _self) {
// hide/show slice
if(p.graphic) {
p.graphic[method]();
}
// hide/show label
if(p.dataLabel) {
p.dataLabel[method]();
}
// hide/show connector
if(p.connector) {
p.connector[method]();
}
}
});
// set flag for next click:
_self.clicked = _self.clicked !== undef ? !_self.clicked : true;
}
}
}

Highcharts bar data labels position

I am trying to align the data labels of the following fiddle in the middle of each bar (without success). It seems the that the data label at the top and on the bottom are making this thing look bad. also the tallest's bar label is overlapping with the bar itself.
I looked through the docs but couldn't make this thing look well.
Here is the fiddle: http://jsfiddle.net/9qLkx1f1/
Here is the data labels settings:
plotOptions: {
bar: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
return this.series.name + "<span style='color:#0D2A4D; opacity:0.5;'> (" + this.y + "%) </span>";
}
}
},
series: {
groupPadding: 0,
minPointLength: 20,
pointPadding: 0.2,
pointWidth: 10
}
},

Set padding :0 inside plotOptions.
plotOptions: {
bar: {
dataLabels: {
padding :0,
}
}
}
and set yaxis tickinterval
yAxis: {
tickInterval : 80,
}
Fiddle: http://jsfiddle.net/9qLkx1f1/14/

Simply Increase height in following code. Hope i have understood you. If i am wrong please correct me
FIDDLE DEMO
$('#container').highcharts({
chart: {
type: "bar",
height: 150, <---- This is the change
events: {
redraw: function () {
//$(window).trigger('resize');
},
load: function () {
//$(window).trigger('resize');
}
}
},
Hope that is what you were looking for

SetData() not working on Change Event HighCharts Pie Chart

I'm looking for a way to dynamically update data in a highcharts pie chart based on the change event on a dropdownlist. I have seen a couple examples but I am really unable to figure out why I can't get this working. Here is my whole code, I wrap my stuff inside a function so I can call the function with the Change() event of the dropdownlist, but I get the error of CRIPT438: Object doesn't support property or method 'setData'
function showClass(){
var total = 0;
var options = {
chart:{type:'pie',
renderTo: 'ctl00_ContentPlaceHolder1_Overview1_tcAssetAllocation_body',
events: {
load: function(event) {
$('.highcharts-legend-item').last().append('<br/><div style="width:220px"><hr/> <span style="float:left"> Total </span><span style="float:right">100%</span> </div>')
}
}
},
credits:{enabled: false},
colors:[
'#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319', '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
],
title:{text: null},
tooltip:{
enabled: true,
animation: true
},
plotOptions: {
pie: {
allowPointSelect: true,
animation: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: false,
formatter: function() {
return this.percentage.toFixed(2) + '%';
}
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 220,
verticalAlign: 'top',
borderWidth: 0,
useHTML: true,
labelFormatter: function() {
total += this.y;
return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y + '%</span></div>';
},
title: {
text: 'Primary',
style: {
fontWeight: 'bold'
}
}
},
series: [{
type: 'pie',
data: [['Domestic Equity', 38.5],['International Equity', 26.85],['Other', 15.70],['Cash and Equivalents', 10.48],['Fixed Income', 8.48]]
}]
}
var chart = new Highcharts.Chart(options);
$("#ctl00_ContentPlaceHolder1_Overview1_AccountList1_ddlAccounts").change(function(){
var selVal = $("#ctl00_ContentPlaceHolder1_Overview1_AccountList1_ddlAccounts").val();
if(selVal == '1124042'){
chart.series[0].setData([['Domestic Equity', 18.5], ['International Equity', 46.85], ['Other', 5.70], ['Cash and Equivalents', 20.48], ['Fixed Income', 8.48]]); }
});
}
is it because i am nested inside another function? it's jsut that all the fiddles use the document.ready function and it loads properly calling the function in the document.ready() but getting it on the change event is messing with me.
Any help is greatly appreciated.
Tahnk you very much,
NickG

You are wrong to use object options as part of Highcharts API. Find that line: options.series[0].setData and change to chart.series[0].setData(). Then remove creating new chart ( you don't need that - chart is already created ).

Add legend name to JQPlot tooltip and format date correctly in tool tip

I want to add the plot's legend name to the mouse over tool tip for a series line. I've used one of the solutions to this jqplot tooltip on bar chart.
Specifically I used the following function:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
However, the problem I have is that it does not use the legend name 'My legend name' instead it will use the JQPlot default of 'Series 1' or 'Series 5' (number depending on series position).
The second problem is that I lose my date formatting once I start using the above function. So I get a number e.g. something like 123672378328 instead of it being converted to the format I specified in tickOptions.
My code to generate the chart is below:
var plot;
function buildChart(chartDivId, graphData, chartTitle, graphSeriesNames, labelNames) {
var id = "#" + chartDivId;
$(id).empty();
var seriesLine = { lineWidth:1, markerOptions: { show:false } };
plot = $.jqplot(chartDivId, graphData,
{
title: chartTitle,
axes:
{
xaxis:
{
label:'Date',
renderer:$.jqplot.DateAxisRenderer,
tickOptions: { formatString:'%b %#d %H:%M' }
},
yaxis: { label: 'Parameter Values', tickOptions: { formatString:'%.2f' }, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, labelOptions : { angle: 270, fontFamily: 'Arial, Verdana, Helvetica', fontSize: '8pt' }, autoscale: true },
},
seriesDefaults: {
markerOptions: {
show: true, style:'filledCircle', size: 4.5
}
},
highlighter:
{
show: true,
sizeAdjust: 7.5,
tooltipContentEditor:tooltipContentEditor //new code added to attempt to add legend name to mouse over tool tip
},
cursor:
{
show: true,
zoom: true,
showTooltip: false
},
legend:
{
labels: labelNames ,
show: true,
location: 's',
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions:
{
numberColumns: 10,
numberRows: 5,
seriesToggle: 900,
disableIEFading: false
},
marginTop: '100px',
marginBottom: '100px',
placement: 'outside'
}
}
);
}

FURTHER UPDATE:
After being a bit silly and digging down deep into the plot object of JQPlot I realised that the str variable passed into the tooltipContentEditor method has what I need. So the following is the solution:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label with x and y values value
return plot.legend.labels[seriesIndex] + ", " + str;
}
No help or advice provided so I thought I'd provide the solution I found after spending a few hours trying to fix.