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));
Related
I need to show some empty space to far right of the chart. To do so I use "overscroll" option (https://api.highcharts.com/highstock/xAxis.overscroll). But if user zoom in chart and pans chart to far right there can be empty space without any part of candlestick chart displayed (https://screencast-o-matic.com/watch/cqnfFq3CII). Please advise is it possible to implement following chart behaviour and how to do so: to keep some part of chart in visible area always, even if "overscoll" option is set and user pans chart to the far right? Thanks!
Here is my code:
var ohlc = JSON.parse(ohlcStringified),
volume = JSON.parse(volumeStringified);
var interval = ohlc[ohlc.length - 1].x - ohlc[ohlc.length - 2].x;
var chart = Highcharts.stockChart('container', {
chart: {
borderWidth: 1,
panning: true,
},
title: {
text: 'Chart'
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1,
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
},
yAxis: [{
height: '40%'
}, {
top: '40%',
height: '30%',
offset: 0
}, {
top: '70%',
height: '30%',
offset: 0
}],
series: [{
type: 'candlestick',
id: 'candlestick',
name: 'AAPL',
data: ohlc,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false,
}
}, {
type: 'column',
id: 'volume',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
enabled: false,
}
}]
});
Here is live demo: http://jsfiddle.net/ogorobets/bfcs9gx7/2/
It's possible, however, it requires some custom logic. It can be achieved using xAxis.events.afterSetExtremes callback where you can check if the current axis minimum is greater than your limit (a value lower than maximum xData value). When it is true, set new axis extremes with your limit as a minimum value. Check the code and demo posted below.
Code:
xAxis: {
minPadding: 0.2,
overscroll: 50 * interval,
events: {
afterSetExtremes: function() {
var chart = this.chart,
xData = chart.series[0].xData,
maxValue = xData[xData.length - 5],
min = chart.xAxis[0].min,
max = chart.xAxis[0].max
if (min > maxValue) {
chart.xAxis[0].setExtremes(maxValue, max, true, false);
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/p6d73nk8/
API reference:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I'm modifying the font on the chart labels but there seems to be a stroke applied to some of the labels and not to others.
I have broken the chart down to a very minimal version and the stroke is still there. What is causing the stroke to show up and how can it be turned off for all labels?
$(function () {
Highcharts.theme = {
colors: [
'#94B8D2',
'#2a71a5',
'#A699B9',
'#4D3474',
'#CDAED1',
'#82368C',
'#AAAEB2',
'#565E65',
'#EF92A5',
'#DF264C',
'#FFBA9D',
'#FF763B',
'#95FEDB',
'#27CAE1',
'#EAEAA1',
'#D5D644',
]
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var donutData = [
['K01',6243],
['K05',1788],
['K07',8745],
['K08',16018],
['K12',11647],
['K18',0],
['K22',4482],
['K23',5166],
['K24',2922],
['K25',2103],
['K99',8410],
];
Highcharts.chart('StrokeProblem', {
title: {
text: "Bizarre Label Strokes",
align: 'center',
verticalAlign: 'middle',
},
series: [{
type: 'pie',
name: 'Stroke',
innerSize: '75%',
data: donutData,
}],
plotOptions: {
pie: {
dataLabels: {
style: { fontSize: '17px' },
formatter: function(label){
label.color = this.color;
return this.point.name;
},
}
}
},
});
});
Here is the relevant JSFiddle.
Highcharts automatically adds a text shadow to labels with a light font color. You can disable it with the textOutline property:
dataLabels: {
style: {
fontSize: '17px',
textOutline: false
},
}
I am trying to toggle stacking for a multi-axis chart, but it seems I can only toggle one series at a time.
Does anyone know how to solve this? Here is a link to the jsfiddle:
http://fiddle.jshell.net/kz7wbykx/
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
defaultSeriesType:'column',
borderWidth:1,
borderColor:'#ccc',
marginLeft:110,
marginRight:50,
backgroundColor:'#eee',
plotBackgroundColor:'#fff',
},
title:{
text:'Chart Title'
},
legend:{
},
tooltip:{
},
plotOptions: {
series: {
stacking:'normal',
fillColor:'rgba(255,255,255,0)',
},
},
xAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'X Axis Title'
}
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Y Axis Title',
rotation:0,
margin:50,
}
},
series: [{
stack: 1,
name:'Series 1 Name',
data: [5,8,7,4,6]
},{
stack: 1,
name:'Series 2 Name',
data: [2,3,6,5,7]
},{
stack: 1,
name:'Series 3 Name',
data: [1,4,6,8,9]
}]
},function(chart){
$('button').click(function(){
chart.series[0].options.stack = +!chart.series[0].options.stack;
chart.series[1].options.stack = +!chart.series[1].options.stack;
//chart.series[2].options.stack = +!chart.series[2].options.stack;
chart.series[0].hide();
chart.series[1].hide();
chart.series[2].hide();
chart.series[0].show();
chart.series[1].show();
chart.series[2].show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button>toggle stacking</button>
I think that you can use Series.update() method in case of changing stack of your series. Here you can find information about this method:
http://api.highcharts.com/highcharts#Series.update
$('button').click(function() {
chart.series[0].update({
stack: chart.series[0].options.stack == '1' ? '0' : '1'
}, false);
chart.series[1].update({
stack: chart.series[1].options.stack == '1' ? '2' : '1'
}, false);
chart.redraw();
})
Here you can see an example how your chart may work using Series.update():
http://fiddle.jshell.net/kz7wbykx/1/
Regards,
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;
}
}
}
I've been asked to do this kind of graph (40,9% and 16,4% are examples, they should indicate something like -6% and 9%):
Any idea on how I can get that kind of result, using a javascript library, if possible (but it is not a must) Highcharts?
Thanks
It's possible with HighCharts, Documentation
e.g.
$(function () {
data = [{
valSecond: 25,
valFirst: 62.5
}];
// Build the data arrays
var secondData = [];
var firstData = [];
for (var i = 0; i < data.length; i++) {
// add second data
secondData.push({
name: "Second",
y: data[i].valSecond,
color: "#00FF00"
});
// add first data
firstData.push({
name: "First",
y: data[i].valFirst,
color:'#FF0000'
});
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
animation: false,
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'second',
data: secondData,
size: '30%',
startAngle: 270,
endAngle: 360,
innerSize: '20%'
}, {
name: 'first',
color:'#FFFFFF',
data: firstData,
size: '80%',
startAngle: 0,
endAngle: 225,
innerSize: '60%',
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
Jsfiddle
In the highcharts you can adapt donut chart http://www.highcharts.com/demo/pie-donut, remove connectors, set useHTML for dataLabels and rotate by css / rotation SVG element. Missing elements can by added by renderer.