Related
I need to hide the inside datalabels if there is only one dataset which is greater than zero. What I mean by dataset is
series: [{
name: 'John',
data: [5, 3, 0, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 0, 2, 0]
}, {
name: 'Joe',
data: [3, 4, 3, 2, 0]
}]
If series.data[i] all are zero except one then hide the inside data labels. In the above case the 3rd and 5th dataset has 0,0,3 and 2,0,0 values only 1 non zero value so hide the inside datalabel.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter:function() {
if(this.y != 0) {
return this.y;
}
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 0, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 0, 2, 0]
}, {
name: 'Joe',
data: [3, 4, 3, 2, 0]
}]
});
Here I have highlighted which datalabel should need to be remove from inside..
In the formatter function you can check if at least two of the series have y value greater than 0.
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
var series = this.series.chart.series,
xPos = this.point.x,
filteredSeries;
if (this.y != 0) {
filteredSeries = series.filter((s) => (s.yData[xPos]));
return filteredSeries.length > 1 ? this.y : '';
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4971/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter
I would like to use the highcharts age pyramid for men and women. Men and women can fall into three different categories. For example a, b and c. I would like to have a stacked bar for the three groups for men and women separately per age. Hopefully you can help me with this.
I have created the following age pyramid example, but as you can see, it has not yet been possible to add more than two groups.
JavaScript
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#3F7EBF'],
[1, '#1F3F5F']
]
},
}, {
data: [2, 5],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#980061'],
[1, '#4C0030']
]
},
yAxis: 1
}]
});
This is what i want to achieve in the end:
This chart type is not supported by Highcharts library out of the box.
However, something similar can be created using two charts next to each other with one axis reversed. Check demo and code posted below.
Code:
Highcharts.chart('container1', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
enabled: false
}
},
yAxis: {
min: 0,
reversed: true,
title: {
text: 'males',
align: 'high'
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [5, 3, 4]
}, {
name: 'B',
data: [2, 2, 3]
}, {
name: 'C',
data: [3, 4, 4]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
align: 'center'
}
},
yAxis: {
min: 0,
title: {
text: 'females',
align: 'low'
}
},
credits: {
enabled: false
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [2, 4, 1]
}, {
name: 'B',
data: [5, 2, 1]
}, {
name: 'C',
data: [4, 1, 2]
}]
});
#container1 {
width: 45%;
float: left;
}
#container2 {
width: 55%;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
Demo:
https://jsfiddle.net/BlackLabel/cg5af2dz/
Just a multiple series of data
series: [{
name: 'A (m)',
data: [6, 2],
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
yAxis: 1
},
...
]
and stacking: 'normal'
series: {
stacking: 'normal'
}
solves the problem
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
height: 170,
marginLeft: 10
},
title: '',
plotOptions: {
bar: {
dataLabels: {
enabled: false,
}
},
series: {
stacking: 'normal'
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
offset: 0,
labels: {
enabled: true,
align: 'left',
x: -18
},
stackLabels: {
enabled: true,
align: 'right',
x: 20
},
title: {
text: 'age group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: -210,
text: 'males'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 210,
text: 'females'
},
stackLabels: {
enabled: true,
align: 'left',
x: -20
},
gridLineWidth: 0
}],
series: [{
name: 'A (m)',
data: [6, 2],
color: '#000',
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
color: '#02aff1',
yAxis: 1
}, {
name: 'C (m)',
data: [2, 2],
color: '#e0301e',
yAxis: 1
}, {
name: 'A (f)',
data: [2, 2],
color: '#000',
}, {
name: 'B (f)',
data: [2, 2],
color: '#02aff1',
}, {
name: 'C (f)',
data: [6, 2],
color: '#e0301e',
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container"></div>
Here is my working example, its works good but i try change color for zones when i click on chart:
<script type="text/javascript">
function minutesFromMidnight() {
var midnight = new Date();
midnight.setHours( 24 );
midnight.setMinutes( 0 );
midnight.setSeconds( 0 );
midnight.setMilliseconds( 0 );
return Math.floor(1440 -(( midnight.getTime() - new Date().getTime() ) / 1000 / 60));
}
$.getJSON('http://waluty.breakermind.com/symbols/getsymbolsm1chart.php?s=GBPJPY&callback=?', function (data) {
// Plot line id name
var PlotLineId="PlotLine";
// create the chart
var chart = new Highcharts.stockChart('container', {
chart: {
spacing: 20,
height: 600,
backgroundColor: '#2e2e40',
style: {
fontFamily: 'Roboto, sans-serif'
},
resetZoomButton: {
theme: {
display: 'none'
}
},
events: {
click: function(evt) {
var yValue = evt.yAxis[0].value;
var yAxis = evt.yAxis[0].axis;
$.each(yAxis.plotLinesAndBands,function(){
if(this.id===PlotLineId)
{
this.destroy();
}
});
yAxis.addPlotLine({
value: yValue,
width: 2,
color: '#99ff00',
color: '#ff3D00',
dashStyle: 'solid',
id: PlotLineId
});
zones: [{
value: 0,
color: '#ff3300'
}, {
value: yValue,
color: '#ff3300'
}, {
color: '#3c3'
}]
}
}
},
// buttons navigation png
drilldown: {
activeAxisLabelStyle: {
color: '#202033'
},
activeDataLabelStyle: {
color: '#202033'
}
},
// Scroll chart navogator
navigator: {
enabled: true,
height: 50,
margin: 20,
maskFill: "rgba(102,133,194,0.2)",
maskInside: true,
outlineColor: "#3c3",
outlineWidth: 1,
handles: {
backgroundColor: "#3c3",
borderColor: "#202033"
}
},
// scroll bar bottom
navigation: {
buttonOptions: {
symbolStroke: '#3C3',
theme: {
fill: '#202033'
}
}
},
scrollbar: {
barBackgroundColor: '#3c3',
barBorderRadius: 5,
barBorderWidth: 0,
buttonBackgroundColor: '#ff3d00',
buttonBorderWidth: 0,
buttonBorderRadius: 5,
trackBackgroundColor: 'none',
trackBorderWidth: 8,
trackBorderRadius: 5,
trackBorderColor: '#202033'
},
rangeSelector : {
selected : 1
},
// disabled in css
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'minute',
count: 5,
text: '5m'
}, {
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 4,
text: '4h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'month',
count: 1,
text: '1MN'
}, {
type: 'year',
count: 1,
text: '1Y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled:false,
buttonTheme: {
fill: '#202033',
stroke: '#3c3',
style: {
color: '#707073'
},
states: {
hover: {
fill: '#339933',
stroke: '#000',
style: {
color: 'white'
}
},
select: {
fill: '#ff3d00',
stroke: '#fff',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#202033',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
title: {
text: 'Wykres <?php echo $s; ?>'
},
xAxis: [{
//alternateGridColor: '#FDFFD5',
plotLines: [{ // mark the weekend
color: '#ff3d00',
width: 2,
value: Date.UTC(2017, 2, 3),
dashStyle: 'longdashdot'
}],
tickInterval: 24 * 3600 * 1000,
// one day x label intervals (poziona skala)
type: 'datetime',
labels: {
style: {
color: '#3a3a4s',
fontSize: '1em'
}
},
}],
yAxis: [{
title: {
text: 'Exchange rate'
},
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}],
//alternateGridColor: '#eee',
gridLineColor: "#202033",
gridLineDashStyle: "longdash",
gridLineWidth: 1,
labels: {
style: {
color: '#eee',
fontSize: '1em'
}
},
}],
series: [{
id: "main",
type: 'spline',
name: '<?php echo $s; ?>',
color: '#33CC33',
negativeColor: '#FF3D00',
data: data,
tooltip: {
color: '#fdcc66',
negativeColor: '#202033',
valueDecimals: 4,
valueSuffix: ' USD',
pointFormat: '<span style="color:{series.color}">Profit / Loss {series.name}</span>: <b>{point.y:.3f}</b><br/>'
},
tooltip: {
color: '#fdcc66',
color: '#ff6600',
negativeColor: '#FFC4C4',
valueDecimals: 4,
valueSuffix: ' USD',
pointFormat: '<span style="color:{series.color}"> {series.data[0]} Profit / Loss {series.name}</span>: <b>{point.y}</b><br/>'
},
dataGrouping: {
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
},
zones: [{
value: 0,
color: '#ff3300', dashStyle: 'solid'
}, {
value: 140,
color: '#ff3300'
}, {
color: '#3c3',
dashStyle: 'solid'
}]
}]
});
console.log(chart.series[0]);
// alert(chart.series[0].data[5].y);
console.log(chart.series[0].xData.indexOf(Date.UTC(2017, 2, 3)));
var id = chart.series[0].xData.indexOf(Date.UTC(2017, 2, 3));
var price = chart.series[0].yData[id];
console.log(price);
//console.log(chart.get("container").data[5].y);
//alert(chart.series[0].data[data.length-1].y);
});
function getYPrice(series){
// get yPrice with date
var id = series.xData.indexOf(Date.UTC(2017, 2, 3));
return series.yData[id];
}
</script>
How change zones level on click (when i click on chart i draw line on yAxis (price) value and then i want change zones levels to this value)?
How can i do that?
You need to call update() method on a proper series - and set new zones for the series.
events: {
click: function(evt) {
var yValue = evt.yAxis[0].value;
var yAxis = evt.yAxis[0].axis;
$.each(yAxis.plotLinesAndBands, function() {
if (this.id === PlotLineId) {
this.destroy();
}
});
yAxis.addPlotLine({
value: yValue,
width: 2,
color: '#99ff00',
color: '#ff3D00',
dashStyle: 'solid',
id: PlotLineId
}, false);
var zones = [{
value: 0,
color: '#ff3300'
}, {
value: yValue,
color: '#ff3300'
}, {
color: '#3c3'
}]
this.series[0].update({
zones: zones
});
}
}
example: http://jsfiddle.net/5uaoyrwd/
firstly here is my code
http://jsfiddle.net/woon123/5t2gpyx7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'venue_chart',
},
credits: {
enabled: false
},
title: {
text: 'Popularity of Venues'
},
subtitle: {
text: 'Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Users'
}
},
xAxis: {
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30
},
series: [{
name: "Chicken Up # Jurong East",
data: [{
name: "Chicken Up # Jurong East",
y: 30,
drilldown: "Chicken Up # Jurong East"
}]
}, {
name: "Chicken Up # Tanjong Pagar",
data: [{
name: "Chicken Up # Tanjong Pagar",
y: 50,
drilldown: "Chicken Up # Tanjong Pagar"
}]
}, {
name: "Chicken Up # Tampines",
data: [{
name: "Chicken Up # Tampines",
y: 60,
drilldown: "Chicken Up # Tampines"
}]
}, ],
drilldown: {
series: [{
name: "Redemption Count",
id: "Chicken Up # Jurong East",
data: [
[
"Yangpa Bomb Introductory Promo", 5],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 4],
[
"Soju Cocktails at $17.00", 1],
[
"12345678", 10],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tanjong Pagar",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 10],
[
"12345678", 10],
[
"Early Bird 20% Off Bill", 3],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tampines",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 15],
[
"12345678", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, ]
}
});
});
My problem is that although the legend displays properly, when using type:category in the x-axis it only shows the last name which is Chicken Up # Tampines.
I would like for the x-axis to show all three venues instead of just the last one and the legend to remain as it is.
Another issue is after I drill down.
In this case, I would like the legend to display the x-axis in order to allow me to toggle them on/off.
I tried setting x-axis to display categories['venue1', 'venue2', 'venue3'] but in this case my legend just shows series 1.
I would like some advice on how to make both the legend and x-axis be the same.
Thank you!
i give you two fiddles,these can be a clue !
first: fiddle
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Staten Island Violation Distribution'
},
subtitle: {
text: 'Source: NYC Open DataSet</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
data: {
csv: document.getElementById('csv').innerHTML
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
legend: {
enabled: true
},
tooltip: {
pointFormat: 'Count: <b>{point.y}</b>'
},
plotOptions: {
column: {
grouping: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
series: [ { name: "Description" },
{ name: "Description1" },
{ name: "Description2" },
{ name: "Description3" },
{ name: "Description4" },
{ name: "Description5" } ]
});
});
second:fiddle
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
happy coding !
I want to implement a Combo Graph with
1. Pie Chart
2. Column 'Normal'
3. Spine
Now my problem is that if the column values are big, it overlaps the pie chart which does not make great viewing, I have a sample at JS Fiddle sample
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [9, 9, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 9, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
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
}],
center: [20, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
please give me some hint on how to solve this, one thing that comes to mind is set X range larger then max value of the column but not sure how to do that either.
You can try to set maxPadding: 0.5 or some higher value, see: http://jsfiddle.net/ykgNR/1/
I advice you to use two separate charts.
one for pie and other one for combination of line and column.
is there any compulsion for you to display both combination chart and pie chart in same chart section?