Can we display legends below the chart based on percentage(%) values in descending order dynamically like shown in below example ? In below example values are hardcoded (chrome, internal explorer etc..) . In real time values will come from database. So i want to know if these values in the legends can be displayed dynamically in an order based on % values ?
https://stackblitz.com/edit/pie-chart-using-highcharts
Thanks.
You can use afterGetAllItems Highcharts event and sort legend items depending on y value.
Example:
(function(H) {
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems = e.allItems.sort((p1, p2) => p2.y - p1.y);
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/9c753pwx/
API Reference: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Related
I'm building a chart using the highcharts javascript library
I'm expecting to get a chart like
And here's what I already have. enter link description here
enter code here
You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between
plotOptions: {
column: {
pointPlacement: "between"
}
},
The label's position can be set by xAxis.labels.x option.
Demo:
https://jsfiddle.net/BlackLabel/a4qs7dp9/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.labels.x
I want to change the display position of the chart y axis value.
In the example chart, the y-axis values are displayed to the right of the entire chart.
But I want to display it on the left rather than on the right.
What to do in this case?
enter link description here
You need to use the opposite property:
yAxis: {
opposite: false
}
Live demo: https://jsfiddle.net/BlackLabel/wx0qdypt/
API Reference: https://api.highcharts.com/highstock/yAxis.opposite
I have two charts that are synchronized. They have a margin left to make sure they are uniformly aligned. I have situations where I have multiple yAxis that can get turned on and they are on the right side opposed to the left. I attempted to use the same marginRight approach but when a second, third, or fourth axis gets added to the right it won't show up because there isn't enough room. So I am dealing with a dynamic amount of space over there on the right side. Highcharts handles the dynamic aspects when it's just one chart but I need my second chart to have the same margin even tho it doesn't have these additional yAxis. It's important that this time series data remains aligned in the two charts.
What is the approach to handle this?
UPDATE:
I created a simple jsFiddle here: http://jsfiddle.net/28hrffv7/
In my real-world example, I have showEmpty set to false and a series which is hidden by default.
{ opposite: true, title: { text: 'Random Text' }, showEmpty: false}
When they turn it own the series is rendered and the axis and title is added. This example shows that the first charts doesn't realize that the 3rd chart has 3 axis and as a result should have more marginleft
Update 2: Updated JS fiddle to show the more dynamic nature of the problem. When you toggle a series in the legend you can observe axes getting added and removed which is feature that is wanted. What is required is to keep all the charts synchronized in the width of the plotable area so they all line up correctly. http://jsfiddle.net/28hrffv7/3/
You could hard-code marginRight as well as marginLeft.
Demo #1: http://jsfiddle.net/28hrffv7/1/
Or check which marginRight is the highest and update all chart with the new setting. Relevant part of the code:
}, {
data: []
}]
}, function(chart){
if (chart.marginRight > topMarginRight) {
topMarginRight = chart.marginRight;
console.log(topMarginRight);
}
});
}); // end of the each function creating the charts
$.each(Highcharts.charts, function (i, chart) {
chart.margin[1] = topMarginRight;
chart.isDirtyBox = true;
chart.redraw(false);
})
Demo #2: http://jsfiddle.net/28hrffv7/4/ (for Highcharts < 5.0.0)
UPDATE:
With Highcharts 5+ the same is possible through a chart update.
$.each(Highcharts.charts, function (i, chart) {
chart.update({
chart: {
marginRight: topMarginRight
}
});
})
Demo #3: http://jsfiddle.net/28hrffv7/5/
In case of multiple series in each chart you could call a custom function for events like load, redraw, afterAnimate.
Demo #4: http://jsfiddle.net/acjaLxj1/1/
I have some pie charts on my site and they show quite a bit of data. I was wondering if there is a way to load the data, but initially hide any data that is less than some arbitrary value. When I say hide, I mean in the same way you can hide the certain data by clicking on the label in the legend. Then through the legend, have the user be able to show this data on the graph by clicking on the label in the legend. Is there a property or something I can use to accomplish this?
You can define any variable as maxValue, then iterate on each point and call setVisible as false.
var minValue = 10
$.each(chart.series[0].data, function(i, point){
if(point.y < minValue) {
point.setVisible(false);
}
});
Example: http://jsfiddle.net/ct2jejgv/
Simply use this.chart.series[i].hide() / .show(). In your script, manually search for series less than your value and hide them like above. Its a simple foreach.
I have a chart that has a custom legend i.e. it isn't part of Highcharts at all, it's completely my own code, the Highcharts legend is disabled for this chart.
Is it possible to turn series data AND plot bands on/off in a Highcharts chart using the API?
I found an example that triggered the click event of a legend item to do this, but this obviously relies on a legend being present, so this is no use to me: http://birdchan.com/home/2013/01/23/trigger-a-click-event-on-a-legend-item-in-highchart/
I also tried to set the series data .visible property to false and then redraw the chart and although it sets the visible property just fine, it doesn't redraw the chart so nothing changes:
var chart = new Highcharts.Chart(myoptions);
$("#custom_legend_link").click(function (e) {
chart.series[0].visible = !chart.series[0].visible;
chart.redraw();
}
Here is a jsFiddle using the basic line demo showing my problem:
http://jsfiddle.net/gfyans/zsaV4/
Thanks,
Greg.
To toggle the series, use Series.setVisible(). When called without parameters, it toggles.
Plot bands are a bit different, since they don't have methods like hide(), show() or setVisible. To toggle a plot band, you need to remove it by Axis.removePlotBand() and add a new one with the same options by Axis.addPlotBand().