We Keep Coding

pie chart legend overlap with older legend when replace series in highchart

I am trying to update a pie chart but the problem is its overlapping with legends which is causing an issue.
I am remove default series and add new series then old legend is not hide and new legend overlap.
following is my code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="update">Update chart</button>
$(function () {
$('#container').highcharts({
chart: {
animation: {
duration: 1000
},
type:'pie'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
name: 'Brands',colorByPoint: true,
data: [
{ name: 'Data1', y: 60.40,},
{name: 'Data2', y: 39.60,},
]
}]
});
var i = 1;
$('#update').click(function () {
var chart = $('#container').highcharts();
var newData =[{ name: 'ABC', y: 80 },{ name: 'XYZ',
y: 20,}];
while (chart.series.length > 0)
chart.series[0].remove(true);
let series={
name:'new Load',
data:newData
}
chart.addSeries(
series, false
);
chart.redraw()
});
});

That is a regression bug in Highcharts, which is reproted here: https://github.com/highcharts/highcharts/issues/12627 It is already fixed on the master branch.
To workaround use code from master branch or add this plugin:
(function(H) {
H.wrap(H.Point.prototype, 'destroy', function(proceed) {
if (this.legendItem) { // pies have legend items
this.series.chart.legend.destroyItem(this);
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));

Highcharts mobile (and window) resizing. Axis overlapping

The following fiddle shows what is happening to my users in mobile when rotating between portrait and landscape.
On load, the chart shows up as desired.
Hit 'Step 1', the chart shrinks and is shown as desired.
Hit 'Step 2', the chart returns to original size, but the vertical axis labels overlap.
http://jsfiddle.net/burchw78/rwb7ms93/
I have tried chart.redraw(), but with no success. Any ideas?
$(function() {
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
renderTo: 'industrybasicbar'
},
title: {
text: 'All Private Industries Expected to Add Jobs by 2024'
},
xAxis: {
categories: ['Health care and social assistance', 'Professional and business services', 'Trade, transportation, and utilities', 'Leisure and hospitality', 'Manufacturing', 'Construction', 'Local government', 'Financial activities', 'Other services', 'Natural resources and mining', 'Private educational services', 'State government', 'Information', 'Federal government'
],
title: {
text: null
}
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Projected Growth',
data: [46300, 45700, 36200, 35800, 21100, 17600, 9600, 9100, 8800, 6100, 4700, 2800, 2000, -1000
],
negativeColor: 'black'
}]
});
$('#resize').click(function () {
chart.setSize(300, 300);
});
$('#resize2').click(function () {
chart.setSize(500, 300);
});
});

It seems to be a bug. I reported it here: https://github.com/highcharts/highcharts/issues/8510
Workaround:
Update textOverflow manually:
$('#resize').click(function() {
chart.setSize(300, 300);
chart.xAxis[0].update({
labels: {
style: {
textOverflow: 'ellipsis'
}
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/axhcwrmd/

Highcharts radio button toggle between charts

I'm trying to use radio buttons to toggle the display between two Highchart charts (different data series) using divs. I essentially need the accepted solution here: Mootools Highcharts radio button toggle between charts, working jQuery version
...but I can't work out how to specify the variables for each chart from my existing code. The above solution uses this format:
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'divID-1',
height: 400,
...
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'divID-2',
height: 400,
...
whereas each of my charts are specified in the following format, e.g. Chart 1:
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$.get('data_stackedarea_value.csv', function(csv) {
$('#divID-1').highcharts({
chart: {type: 'area'},
data: {csv: csv},
...
How can I translate these into variables that can be called by the initial toggle function?
window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
$$('.toHide').setStyle('top', '-9999em');
$$('.toHide').setStyle('opacity', '0');
$("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});
Many thanks

Here's an example where I adopted the solution from 23817700 to use the way you are passing variables to the charts.
I couldn't resist also adapting the toggle code to use jQuery, since it was required already. You can try this is action in this fiddle provided by #RachelGallen: https://jsfiddle.net/ezc7oghm/1/
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div id="graphwrap" style="height: 410px;">
<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
</div>
<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="divID-1" style="cursor:pointer;" checked/>1</label>
<label><input id="rdb2" type="radio" name="toggler" value="divID-2" style="cursor:pointer;" />2</label>
</div>
<script>
$(function() {
$('[name=toggler]').click(function () {
$('.toHide').css({
top: '-9999em',
opacity: 0
});
var chartToShow = $(this).val();
$('#' + chartToShow).css({
top: 0,
opacity: 1
});
});
$('#divID-1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
$('#divID-2').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Time spent on hobbies'
},
xAxis: {
categories: ['Skiing', 'Bicycling', 'Swimming']
},
yAxis: {
title: {
text: 'Time spent on hobbies'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>

Highcharts JSON, chart not displaying

I have some data I wish to display on a chart but it just shows the title and no points get drawn. The JSON data I receive is correct as per my knowledge, I think it's somewhere in the chart function but I can't really point it out.
This is what I have so far:
data.php (the output):
{"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]}
The important bits of the html:
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
xAxis: {
categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
},
yAxis: {
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
It's supposed to show temperature per hour but unfortunately nothing comes up. Any idea what could be wrong?

series should be an array. So you need to just change:
series: json
To:
series: [json]
Working example: http://codepen.io/anon/pen/Kfgsd
Documentation: http://www.highcharts.com/docs/chart-concepts/series

your problem i think that you haven't specified where your chart should be inserted to, afaik you either should specify the renderTo option for the class constructor options or use the $('#container').haighcharts({...}) jquery helper

Adjusting the appearance of a javascript- Shield UI Chart

I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>

You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},