Sounds odd but I have these 3 charts in a single chart.
The problem is that if I use showInLegend:true to each series then I have 9 items in legend.
I want to display Urban, Rural, Nothing just one time each.
Here is my code:
http://jsfiddle.net/HpdwR/1298/
series: [{
data: [{
name: 'Urban',
color: 'red',
y: 4
}, {
name: 'Nothing',
color: 'blue',
y: 2
}, {
name: 'Rural',
color: 'green',
y: 4,
}],
size: '130px',
innerSize: '115px',
center: ['12%'],
name: 'first',
showInLegend: true
}, {
data: [{
color: 'red',
y: 1
}, {
color: 'blue',
y: 4
}, {
color: 'green',
y: 5
}],
size: '130px',
innerSize: '115px',
center: ['50%'],
name: 'second',
showInLegend: true
}, {
data: [{
color: 'red',
y: 6
}, {
color: 'blue',
y: 2
}, {
color: 'green',
y: 2
}],
size: '130px',
innerSize: '115px',
center: ['88%'],
name: 'third',
showInLegend: true
}]
I couldn't find an elegant way to do this, or a built-in solution (maybe there is one, but I couldn't find it...)
Here's a hack that hides the extra legends, and links the hover event. I've disabled the click events for simplicity.
// Legend Hack
$('g.highcharts-legend-item:nth-child(n+4)').css('visibility', 'hidden');
$('g.highcharts-legend-item').hover(function() {
var i = $(this).index();
$('g.highcharts-legend-item').eq(i+3).trigger('mouseover');
$('g.highcharts-legend-item').eq(i+6).trigger('mouseover');
}, function() {
var i = $(this).index();
$('g.highcharts-legend-item').eq(i+3).trigger('mouseout');
$('g.highcharts-legend-item').eq(i+6).trigger('mouseout');
});
$('g.highcharts-legend-item *').click(function() { return false; });
Fiddle: http://jsfiddle.net/HpdwR/1303/
I believe that the best option here would hide the extra legends so only one of them will be displayed. In order to have the control over the other charts with the displayed legend (that is currently controlling only one chart), you should write an event listener when clicking on the legend and ask it to have effect on the rest of the charts.
HOWEVER, the issue is that "legendItemClick" that is responsible for the event listener on the legend's click event is not working when using the pie chart. Therefore, you should catch it with jquery.. an example can be seen here https://stackoverflow.com/a/16099935/1138430
Related
I added some dummy series in the highcharts, but I want them to be invisible at all times, independent of whether I click their legends.
series.push({
name: 'dummyPoint',
fontFamily: 'Arial',
data: [dummyPointX, dummyPointY],
visible: false,
showInLegend: true
})
The problem with the above code is that the legends are displayed greyed out by default, and it will display dummies upon the click of legends. How do I prevent it from greying out by default and keep the dummy points invisible at all times?
You can do that with the series.events.legend.itemClick - Api Documentation
series: [{
name: 'Point 1',
color: '#00FF00',
data: [1, 2.5, 3, 4, 3.2],
visible: false,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
}
}
edit : Completly invisible legend
Updated Fiddle
You can do a little trick to achieve it: create a "phantom" series that has no data and link the hidden series to it. Legend item will be generated for the phantom series and will serve for the hidden series too. Then disable the default action for this item in events.legendItemClick:
series: [{
// Phantom series - created just to generate legend item
name: 'Series 1',
events: {
legendItemClick: function(e) {
e.preventDefault();
}
}
}, {
data: [3, 0],
visible: false,
name: 'Series 1',
linkedTo: ':previous',
}, {
data: [1, 2],
name: 'Series 2'
}]
Live demo: http://jsfiddle.net/BlackLabel/dc4L30zv/
API references:
https://api.highcharts.com/highcharts/series.line.linkedTo
https://api.highcharts.com/highcharts/series.line.events.legendItemClick
I am using Highcharts and it is working just amazing, i am stuck at a place where i want to plot a pie chart in which every pie slice (in a single pie chart) has a different radius.
Below is the image attached of the expexted pie chart.
You can skip making it a donout or designing it this specific. I just want to know how each pie slice can have different radius.
Each series in a pie chart can have their own size. So, I stacked a bunch of pie series calculating their begin and end angles. You'll have to do a little clean up to get the tooltips displaying the value instead of 100, but I think it's a workable solution.
Note: The following code makes a bad assumption that the data points add to 100. void fixes that assumption in his fiddle http://jsfiddle.net/58zfb8gy/1.
http://jsfiddle.net/58zfb8gy/
$(function() {
var data = [{
name: 'Thane',
y: 25,
color: 'red'
}, {
name: 'Nagpur',
y: 15,
color: 'blue'
}, {
name: 'Pune',
y: 30,
color: 'purple'
}, {
name: 'Mumbai',
y: 30,
color: 'green'
}];
var start = -90;
var series = [];
for (var i = 0; i < data.length; i++) {
var end = start + 360 * data[i].y / 100;
data[i].y = 100;
series.push({
type: 'pie',
size: 100 + 50 * i,
innerSize: 50,
startAngle: start,
endAngle: end,
data: [data[i]]
});
start = end;
};
$('#container').highcharts({
series: series
});
});
Another way I toyed with, that I didn't like as much, was having each series have invisible points:
series = [{
type: 'pie',
size: 100,
innerSize: 50,
data: [{y:25, color: 'red'}, {y:75, color:'rgba(0,0,0,0)'}]
},{
type: 'pie',
size: 150,
innerSize: 50,
data: [{y:25, color: 'rgba(0,0,0,0)'},{y:15, color: 'blue'}, {y:60, color:'rgba(0,0,0,0)'}]
}, ... ];
The variablepie series type, introduced in Highcharts 6.0.0, handles this with less code. In this series type you can specify a z-parameter for each data point to alter its z-size.
For example (JSFiddle, documentation):
Highcharts.chart('container', {
chart: {
type: 'variablepie'
},
title: {
text: 'Variable pie'
},
series: [{
minPointSize: 10,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: [{
name: 'Pune',
y: 35,
z: 25
}, {
name: 'Mumbai',
y: 30,
z: 20
}, {
name: 'Nagpur',
y: 15,
z: 15
} , {
name: 'Thane',
y: 25,
z: 10
}]
}]
});
This requires including:
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
How I can rename each bar, I want to have different names. always it appears "bar1", "bar2", etc. this is the name of the series. but I want it to appear in place of those texts, others I want to customize. this is what I do. put different names, if there are 9 bars I want to put different names to the bars, bar1, bar2, bar3, Bar4, Bar5, Bar6, Bar7, Bar8, Bar9. I do not want to repeat
in my example.
series: [{
name: 'bar1',
data: [1000, 950, 920, 0, 850],
color: "#FF0000"
}, {
name: 'bar2',
data: [800, 770, 750, 0, 730],
color: "#000000"
}, {
name: 'bar3',
data: [600, 540, 535, 500, 30],
color: "#00FF00"
},
{
name: 'bar4',
data: [28, 28, 28, 28, 28],
color: "#00FF00"
}]
http://jsfiddle.net/05L1n3wb/
This is done by changing name: 'bar1' to something you want. If you still need series.name to be 'bar1' then you should really think harder about your data model. If you want to change the text displayed based on the contents of series.name you can do that with the label formatter or dataLabel formatter.
As you can read in previous answer, you can use dataLabels formatter for changing string you are displaying for your columns: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.formatter
You can add custom parameter to your points, like name:
series: [{
name: 'bar1',
data: [{
y: 1000,
name: 'bar1'
}, {
y: 950,
name: 'bar5'
}, {
y: 920,
name: 'bar9'
}, {
y: 0,
name: 'bar13'
}, {
y: 850,
name: 'bar17'
}],
color: "#FF0000"
}]
and inside your dataLabels formatter you can display this parameter:
formatter: function() {
var string = this.point.name + ' ';
if (this.y <= 30) {
string += this.y;
}
return string;
}
example:
http://jsfiddle.net/05L1n3wb/2/
Need to draw vertical lines from a desired point rather than starting from 0.
plotLines: [{
color: '#FF0000',
width: 1,
value: 4
}, {
color: '#FF0000',
width: 1,
value: 7
}],
Here is the fiddler link: http://jsfiddle.net/bpswt3tr/4/
My requirement is to draw first vertical line from when y value is 110.2 and 2nd line from when y value is 135.6 instead of starting from zero. i.e above the plot line only. Please suggest how can I achieve this? Thanks.
Considering the documentation it is unlikely that HighCharts supports this by default, as you are only allowed to associate a value of the current axis with the line.
You might need a preprocessing step that inverts you function to get the appropriate X values. Something like:
invert(data, Y) -> list of X values with data[X] = Y
You can do this on the chart.events.load call. If you know these are the points you want to add marker elements to then it is fairly straightforward. You first get the current max label value for the yAxis. Then you add a series to the chart with the starting point being your series' value and the second point being the max viewable yAxis value. Then do the same for the second point you want to add a bar to. Then, you need to re-set the yAxis max value to the initial state because highcharts will try to increase the scale to accommodate the new points.
chart: {
events: {
load: function () {
var yMAx = this.yAxis[0].max;
console.log(yMAx);
this.addSeries({
data: [{
x: 4,
y: 110.2,
marker: {
symbol: 'triangle'
}
}, {
x: 4,
y: yMAx,
marker: {
symbol: 'triangle-down'
}
}, ],
showInLegend: false,
color: 'red',
marker: {
enabled: true
}
});
this.addSeries({
data: [{
x: 7,
y: 135.6,
marker: {
symbol: 'triangle'
}
}, {
x: 7,
y: yMAx,
marker: {
symbol: 'triangle-down'
}
}, ],
showInLegend: false,
color: 'red',
marker: {
enabled: true
}
});
this.yAxis[0].update({
max: yMAx
});
}
}
}
Sample demo.
Is there a way to show the pie chart name on top, bottom, right or left of a pie chart without having to use the labels, like they use in this highcharts demo:
labels: {
items: [{
html: '<b>Total fruit consumption<b>',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
}
The labels have an absolute position in pixels, and for the pies I am using percentages.
When there is a resizing, the labels stay on the same place and the pies move, and I can't get the same relative position in percentage for both.
Example pie:
{ data: [{ color: '#31B7C9', name: 'Slice 1', y: 1266364.92333333 }, { color: '#9ED93E', name: 'Slice 2', y: 7284620.73 }, { color: '#DABF12', name: 'Slice 4', y: 2330663.39333333 }], name: 'Pie Chart Name', type: 'pie', center: ["25%", "25%"], showInLegend: true, size: "20%", dataLabels: { enabled: false }}
Any idea how to get the pie chart name to display as its title?
Example in jsFiddle here.
Thank you in advance
EDIT:
So it looks like you want to have the same chart as in the demo and not just a pie chart. If that is the case my answer below fails. You will need to use labels and position them.
----Keeping below code for future reference---
Yes,
Use the title property.
Example here: http://jsfiddle.net/wergeld/svkmM/
title: {
text: 'A Title!'
}
I found a plugin that allows to show the pie chart titles here.