I have made a Highcharts chart with grouped and stacked columns, like in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped. The example shows a number of fruits for 5 different persons, grouped by gender. What I miss in this example, is an x-axis label showing the name of the group (male or female) underneath each group. Is it possible to add this to the chart?
Here is a simplified version of the chart I'm trying to make: http://jsfiddle.net/WQjVP/66/. It shows the number of open (blue) and overdue (red) issues for three locations in a case handling system. The left column in each group shows the numbers for that location for July, and the right column in each group shows the numbers for August for the same unit. What I would like to do is to show the month under each column, so that the first column will have "Jul", the second will have "Aug", the third will have "Jul" and so on, between the column and the location label.
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ["Location A","Location B","Location C"],
title: {
text: "Location"
}
},
yAxis: {
allowDecimals: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === 0) {
return null;
}
return this.y;
},
style: {
color: 'white'
}
}
},
column: {
stacking: 'normal',
borderWidth: 0
}
},
series: [{
"color": "rgb(0,0,255)",
"name": "open",
"data": [18, 2, 6],
"stack": "Jul"},
{
"color": "rgb(255,0,0)",
"name": "overdue",
"data": [0, 0, 0],
"stack": "Jul"},
{
"color": "rgb(0, 0, 255)",
"name": "open",
"data": [20, 1, 10],
"stack": "Aug"},
{
"color": "rgb(255, 0, 0)",
"name": "overdue",
"data": [2, 1, 2],
"stack": "Aug"
}]
});
Try to use stackedLabels.
yAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function() {
return this.stack;
}
}
}
Demo
reference
Related
So the problem is that my last two columns merge together into one. In this case i have as wel values of 9 as of 10 in my array but it just adds the number of 9's and 10's together and labels them all as 9 in the histogram. The result is shown in the picture histogram. You can find my code here https://jsfiddle.net/vlovlo/ypv1jg3u/5/
let testArray = [0,0,0,1,1,1,1,1,2,2,3,3,4,4,4,4,5,5,6,6,6,6,7,7,7,8,8,8,8,8,9,9,9,10,10,10,10]
Highcharts.chart('test', {
title: {
text: 'test',
margin: 50,
style:{
fontWeight: "bold",
},
},
xAxis: [{
visible: false,
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
showLastLabel: true,
}],
yAxis: [{
visible: false
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
}],
plotOptions: {
series: {
borderWidth: 0,
pointPlacement: 'between',
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Test',
type: 'histogram',
yaxis: 1,
xAxis: 1,
baseSeries: 'testSeries'
},
{
id: 'testSeries',
visible: false,
data: testArray
}]
});
Try to set the binWidth as 0.99
Demo: https://jsfiddle.net/BlackLabel/doqgcy0z/
The first stack of my column chart is not fully visible.
The only solution I found was to add a max value on the y-axis.
Bu that is not an ideal solution because the max remains even when I disable a series by clicking on it in the legend.
Here is an JSFiddle example.
{
chart:{
type: 'column'
},
plotOptions: {
column: {
stacking:"normal",
grouping: false
}
},
yAxis: {
title: {
text: ""
},
labels: {
},
allowDecimals:true,
gridLineColor:"#DDDDDD",
endOnTick:false,
max:null
},
xAxis:{
type: "datetime",
min:1609459200000,
softMax:1638316800000,
dateTimeLabelFormats: {month:"%b",year:"%Y"},
labels: {y:20},
title:{text:null},
gridLineColor:"#DDDDDD"
},
series:[{
name:"Solar power",
data:[{
x:1609455600000,y:40.328},{x:1612134000000,y:108.824},{x:1614553200000,y:58.224}],
color: "rgba(255, 174, 1, 1)",
id:"del-solarPhotovoltaic"
},
{
name:"Delivered Electricity",
data:[{x:1609455600000,y:327.583405},{x:1612134000000,y:238.927913},{x:1614553200000,y:54.12531}],
color:"rgba(96, 189, 104, 1)",
id:"del-electricity"
},
{
name:"Natural gas",
data:[{x:1609455600000,y:4073.892843},{x:1612134000000,y:2768.81114}],
color:"rgba(93, 165, 218, 1)",
id:"del-naturalGas"
},
{
name:"Exported Electricity",
data:[{x:1609455600000,y:-19.093318},{x:1612134000000,y:-68.414876},{x:1614553200000,y:-37.718392,}],
color:"rgba(96, 189, 104, 1)",
id:"exp-electricity"
}]
}
This happens because your x-axis min value: 1609459200000 is greater than the first data point x value: 1609455600000 and Highcharts doesn't take into account the first column when calculating y-axis extremes (treated as if it were outside the chart).
Similar situation presented here: http://jsfiddle.net/BlackLabel/b1oucLne/
xAxis: {
min: 4,
max: 40
},
series: [{
type: 'column',
data: [{
x: 2,
y: 4073.892843
}, {
x: 6,
y: 2768.81114
}]
}]
As a solution reduce or remove xAxis.min property.
The Highchart graph code is shown below I want every bar label color is different. Currently, I'm getting the same color in bar
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Popular '
},
credits:{
enabled:false
},
xAxis: {
max: 20,
type: 'category',
style:{
fontSize: '12px'
}
},
yAxis: {
min: 0,
allowDecimals:false,
title: {
text: 'Number of applications',
style:{
fontSize: '12px'
}
},
gridLineWidth:0,
minorGridLineWidth: 0,
tickLength: 5,
tickWidth: 1,
tickPosition: 'inside',
lineWidth:1
},
scrollbar: {
enabled: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'hi'
},
series: [{
name: Stats',
data: data,
color:'#2ecc71',
pointWidth: 25,
}],
Data format is :
[
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
],
]
The output is shown in the picture I want every bar is in a different color can you help me?
Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:
series: [{
data: [
["Qualcom", 17],
{
name: "The ram",
y: 12,
color: 'red'
},
["Aoperty", 8],
["Ob.", 8],
["Sugh", 8]
],
color: '#2ecc71'
}]
API reference:
https://api.highcharts.com/highcharts/series.column.data.color
Demo:
https://jsfiddle.net/BlackLabel/craqy1sv/1/
If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
if (point.name === 'The ram') {
point.update({
color: 'red'
})
}
});
}
}
}
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/jmuoevz1/
You need to set colorByPoint :true to use different colors like that
series: [{
name: 'Stats',
data: [
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
]
],
colorByPoint: true,
pointWidth: 25,
}]
Fiddle
I've created a Highcharts that is a bit unusual. It's placing two series in the same plotarea, but instead of them "lining up" and sharing the entire plot area, series0 is using the left side of the area and series1 is using the right side. Everything is working great except for two (related) things: I cannot get tooltips or datalabels to display for the series1 data on the right-hand side of the page. Completely guessing here, but I'm guessing the series are not being shared because they are not lining up together.
I've spent the past day trying various things and have completely ran out of ideas. Hoping a fresh set of eyes might spot something that will work. Attached is a fiddle for your viewing pleasure...
https://jsfiddle.net/wk0uh72o/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="adaRate"></div>
$(function() {
var options = {
chart: {
renderTo: 'adaRate',
type: 'bar',
width: 600,
height: 400
},
title: {
text: 'Average Daily Attendance Rate',
align: 'center',
style: {
fontWeight: 'bold',
color: 'rgba(0,0,0,.9)'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true,
formatter: function() {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function() {
s += '<br/>' + this.series.name + ': ' +
this.y + '%';
});
return s;
},
},
xAxis: {
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
max: 100,
opposite: true,
width: 270,
title: {
text: 'Average Daily Attendance %'
}
}, {
min: -10,
max: 10,
offset: 0,
opposite: true,
plotLines: [{
color: 'red',
value: 0,
width: 2
}],
left: 400,
width: 170,
title: {
text: 'Variance from Prior Year'
}
}],
series: [{
name: 'ADA',
dataLabels: {
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -10
},
yAxis: 0,
}, {
type: 'scatter',
name: 'PY Variance',
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
x: -10
},
yAxis: 1,
}],
credits: {
enabled: false
}
};
var categories = ["School 1", "School 2", "School 3", "School 4", "School 5", "School 6", "School 7"];
var adaRate = [96.4, 95.9, 93.3, 92.3, 89.8, 85.4, 83.9];
var adaVar = [{
"color": "yellow",
"y": -.8
}, {
"color": "red",
"y": -3.5
}, {
"color": "lightgreen",
"y": 1.5
}, {
"color": "lightgreen",
"y": 2.3
}, {
"color": "red",
"y": -4.3
}, {
"color": "green",
"y": 5.3
}, {
"color": "darkgreen",
"y": 7.8
}
];
options.xAxis.categories = categories;
options.series[0].data = adaRate;
options.series[1].data = adaVar;
var chart = new Highcharts.Chart(options);
});
I don't have time to write a longer answer. But, shared tooltips don't work for unordered data (pie, scatter, flag). See http://api.highcharts.com/highcharts#tooltip.shared
You can simulate a scatter series using a line series with lineWidth of 0. You also have to modify the mouseOver event to not increase the lineWidth on hover.
Just need to remove tooltip on the top level. But set it in each series separately.
series: [{
name: 'ADA',
dataLabels: {
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -10
},
yAxis: 0,
tooltip: {
pointFormat: 'First {point.y}'
}
}, {
type: 'scatter',
name: 'PY Variance',
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
x: -10
},
yAxis: 1,
tooltip: {
pointFormat: 'Second {point.y}'
}
}],
refer to fiddle I updated from yours.
I need to build a highchart with 2 yAxis, one on the left (primary) and one on the right(secondar). I was not able to make this work. Any ideas what I am doing wrong here or missing?
here is the jsfiddle: http://jsfiddle.net/gsaray101/KX4AS/2/
I am using the example from the highcharts site as this:
yAxis: [{ // Primary yAxis
labels: {
format: '{value}ms',
style: {
color: '#89A54E'
}
},
title: {
text: 'response time',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'volume',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
Axis are 0 based. So you need (http://jsfiddle.net/zEBSh/)
var data = [{
"name": "1",
"yAxis": 0,
"data": [
[1374019440000, 25],
[1374056640000, 43],
[1374056880000, 49]
]
}, {
"name": "2",
"yAxis":1,
"data": [
[1374019440000, 33],
[1374019740000, 42],