If we take this exemple : http://www.highcharts.com/demo/combo
How can I shared legend between pie and column? I want to aviable/disable one serie when I click on legend for column AND pie in same time !
Bind legendItemClick event and there hide connected slices in the pie chart. Demo: http://jsfiddle.net/x8ygvwbx/1/
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
var vis = this.visibility,
name = this.name,
pie = this.chart.get("my-pie"), // set pie's ID
index = pie.options.legendNames.indexOf(name); // get index of names
pie.points[index].setVisible(vis); //change visibility
}
}
}
},
And example for pie options:
{
id: "my-pie", // ID
type: 'pie',
name: 'Total consumption',
legendNames: ["Jane", "John", "Joe"], //NAMES
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}]
}
Related
I am trying to figure out how to render a section of each column in a simple, single series, column chart with multiple colors. Using series.zones:
series: [
{
name: "Mod",
colorByPoint: true,
data: seriesData,
zones: [
{ value: 101, color: '#1D681B' },
{ value: 121, color: '#ECC518' },
{ color: '#D50D0D' }
]
}
]
I can get each column to be a different color based on the zone that the y value is within.
In my example above the zone are:
0 through 100 should be green
101 to 120 should be yellow
121 and above should be red
The above works to an extent, but looks like the following:
However, what my boss wants is something like this:
Can this be achieved using highcharts?
Instead of zones you can use stacked columns. Below is a simple example of how you can automatically calculate series structure:
const steps = [100, 20];
const data = [42, 100, 96, 120, 110, 90, 140];
const series = [{
color: '#1D681B',
data: []
}, {
linkedTo: ':previous',
color: '#ECC518',
data: []
}, {
linkedTo: ':previous',
color: '#D50D0D',
data: []
}];
data.forEach((dataEl, i) => {
let rest = dataEl;
let counter = 0;
let value;
while (rest > 0) {
value = steps[counter] < rest ? steps[counter] : rest;
series[counter].data.push({
x: i,
y: value
});
rest -= value;
counter++;
}
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
yAxis: {
reversedStacks: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series
});
Live demo: http://jsfiddle.net/BlackLabel/3h6o0ncg/
Docs: https://www.highcharts.com/docs/advanced-chart-features/stacking-charts
I already had look at Highcharts - How do I get dashed lines in legend . Its for "line" chart type my chart type is "areaspline" where I need dashed style legend "-- Legend" even below code events: {load: function(event) {$('.highcharts-legend-item rect').attr('height', '2').attr('y', '10');}} could bring '-'line legend but I am in need of "--"
here is my fiddle
http://jsfiddle.net/manjula_dhamodharan/4tejg3v6/2/
You can create mocked line series and link areaspline ones to them. Example:
series: [{
name: 'Tokyo',
dashStyle: 'longdash',
type: 'line',
id: 'line1'
}, {
name: 'London',
dashStyle: 'longdash',
type: 'line',
id: 'line2'
}, {
linkedTo: 'line1',
name: 'Tokyo',
...
}, {
linkedTo: 'line2',
name: 'London',
...
}]
Live demo: http://jsfiddle.net/BlackLabel/815vctmr/
API Reference: https://api.highcharts.com/highcharts/series.line.linkedTo
I am struggling with adding multiple texts on the x-axis. Most of the things like giving name field in x-axis don't work with Sankey diagram.
Problem: I need to add 2 texts just below my x-axis on my Sankey diagram. The first text just below and center of the blue bar. The second text I need just below gray bar but it should be in the same line with respect to first text
Here is my code
Highcharts.chart('container', {
title: {
text: ''
},
xAxis: {
type: 'football league'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Messi', 20 ],
['Football', 'ronaldo', 3 ],
//['Challenged', 'Terminated', 0 ],
['Football', 'sachin', 1 ],
['Messi', 'sehqag', 12 ],
//['Instituted', ' Terminated', 0 ],
['Messi', 'ashwin', 6 ],
['Messi', ' ramesg', 2 ],
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
JSFiddle: https://jsfiddle.net/anikettiwari/kLzv8sp0/26/
To add text to the chart, you can use annotations module or Highcharts.SVGRenderer:
annotations: [{
labels: [{
text: 'annotations',
point: {
x: 100,
y: 380
}
}, {
text: 'annotations2',
point: {
x: 400,
y: 380
}
}]
}]
Live demo: https://jsfiddle.net/BlackLabel/odc4jsku/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Docs: https://www.highcharts.com/docs/advanced-chart-features/annotations-module
I achieved this by below code
chart: {
showAxes: true
},
xAxis: {
categories: ['ANIKET','SHivam'],
labels: {
style: {
color: '#000000'
}
}
},
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For the y-axis it was giving me default label so for removing it I wrote the above yaxis code
I am trying to represent nested data using Highcharts Donut Chart. The charts are generated quite well, however I am having some problems with displaying the legend.
Data to be represented:
Category A -[High : 20%, | Medium : 50% | Low : 30%]
Category B -[High : 10% | Medium : 50% | Low : 40%]
JS Fiddle : http://jsfiddle.net/a2sy9bgj/
$(function () {
// Build the data arrays
var categoryData = [{
name: 'Category A',
y : 60,
color: 'white',
borderColor : 'black'
},
{
name: 'Category B',
y : 40,
color: 'white',
borderColor : 'black'
}];
var priorityData = [
{
name: 'High',
y : 10,
category : 'Category A',
color: 'Red',
},
{
name: 'Medium',
y : 30,
category : 'Category A',
color: 'Yellow',
}, {
name: 'Low',
y : 20,
category : 'Category A',
color: 'Green',
},{
name: 'High',
y : 20,
category : 'Category B',
color: 'Red'
},
{
name: 'Medium',
y : 10,
category : 'Category B',
color: 'Yellow',
}, {
name: 'Low',
y : 10,
category : 'Category B',
color: 'Green',
}
];
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
showInLegend : true,
shadow: false,
center: ['50%', '50%'],
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Category',
showInLegend : false,
data: categoryData,
size: '60%'
}, {
name: 'Priority',
data: priorityData,
size: '80%',
innerSize: '60%'
}]
});
});
I've created two series
1. Category Data
2. Priority Data
The legend should show High, Medium and Low, but since the priority data has this information(High, Medium and Low) twice, the Legend shows High, Medium and Low twice.
Is there any way to show the legend only once when the data in the series may have duplicates?
In the Highcharts you can only hide/show one series. In the pie chart, even you have legend item per slice, there still is just one series.
However, there is hope for you: you can overwrite method responsible for that:
(function (H) {
var UNDEFINED;
/**
* Returns true if the object is not null or undefined. Like MooTools' $.defined.
* #param {Object} obj
*/
function defined(obj) {
return obj !== UNDEFINED && obj !== null;
}
H.wrap(H.Legend.prototype, 'getAllItems', function (p) {
var allItems = [],
pointsForLegend = [];
H.each(this.chart.series, function (series) {
var seriesOptions = series.options;
// Handle showInLegend. If the series is linked to another series, defaults to false.
if (!H.pick(seriesOptions.showInLegend, !defined(seriesOptions.linkedTo) ? UNDEFINED : false, true)) {
return;
}
if (series.legendItems) {
// use points or series for the legend item depending on legendType
allItems = allItems.concat(series.legendItems);
} else if (seriesOptions.legendType === 'point') {
H.each(series.data, function (e, i) {
if (e.showInLegend) {
pointsForLegend.push(e);
}
})
allItems = allItems.concat(pointsForLegend);
} else {
allItems = allItems.concat(series);
}
});
return allItems;
});
})(Highcharts);
Now, just set per point, if should be displayed or not:
point.showInLegend: i // 0 == false, 1 == true
Demo for you: http://jsfiddle.net/a2sy9bgj/6/
Of course, there one thing remains: click on one legend probably should hide two slices. In such case, use legendItemClick and find corresponding points to hide them.
I have implemented that example: http://www.highcharts.com/demo/combo without pie chart. I want to add it dynamically after a time later. How can I add a chart into a combo chart dynamically at HighCharts?
If you look the demo you will see that the pie chart isn't a chart, it's just a serie.
So, to add a serie you have to use addSeries passing thrue parameter all the pie serie, like the following.
chart.addSeries({
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
},
{
name: 'John',
y: 23,
color: '#AA4643' // John's color
},
{
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
});
DEMO
You can use charts.push as shown in this url http://calibrate.be/labs/exporting-highcharts-js-pdf-docx-tcpdf-and-phpword
Let me know if you can't have this to work.
EDIT: You will need to define charts as var charts = []; as global variable. And this has not been tested by me.