I'm producing Highcharts bubble charts based on user selected data.
I'd have expected the bubbles on the charts to be proportionally sized to each other (i.e. the bubble for a '2' is consistent through multilpe charts) however, it seems to be based on the range of points on the chart.
This is highlighted in this fiddle
As you can see, the '2's in chart #2 are the same size as the '6' in chart #1.
I'd like the '2' in chart #2 to match the size of the '2' in chart #1.
Is there any way of achieving this ?
Here's the code:
jQuery(function () {
var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
{ x: 1, y: 1, z: 1, label: 'data #2' },
{ x: 2, y: 2, z: 2, label: 'data #3' },
{ x: 3, y: 3, z: 3, label: 'data #4' },
{ x: 4, y: 4, z: 4, label: 'data #5' },
{ x: 5, y: 5, z: 5, label: 'data #6' },
{ x: 6, y: 6, z: 6, label: 'data #7' }];
var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
{ x: 1, y: 1, z: 1, label: 'data #2' },
{ x: 2, y: 1, z: 1, label: 'data #3' },
{ x: 3, y: 2, z: 2, label: 'data #4' },
{ x: 4, y: 2, z: 2, label: 'data #5' },
{ x: 5, y: 1, z: 1, label: 'data #6' },
{ x: 6, y: 0, z: 0, label: 'data #7' }];
jQuery('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
},
yAxis: {
startOnTick: true,
min: -1,
max: 7,
showFirstLabel: false,
showLastLabel: false,
tickInterval: 1,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data1 }]
});
jQuery('#container2').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
},
yAxis: {
startOnTick: true,
min: -1,
max: 7,
showFirstLabel: false,
showLastLabel: false,
tickInterval: 1,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data2 }]
});
});
This is similar to what I had proposed as an answer to another bubble chart question elsewhere on Stack Overflow:
Highcharts 3.0 Bubble Chart -- Controlling bubble sizes
For your situation, it seems adding a transparent, non-interactive "dummy" bubble with the largest possible dimensions in your chart will keep each of the other bubbles in the proper proportions to one another:
series: [{ data: data2 },
// dummy series to keep all the bubbles in proportion
{name: 'dummy series',
data: [{x:6,y:6,z:6}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false}
]
Here's an updated version of your fiddle with this fix: http://jsfiddle.net/brightmatrix/svcuLgso/13/
Please let me know if this solves your issue!
Related
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>
Is there any chance in the following example, get the exact position of the marker circle, with Highcharts?
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x',
panning: true,
panKey: 'shift',
scrollablePlotArea: {
minWidth: 600
}
},
title: {
text: '2017 Tour de France Stage 8: Dole - Station des Rousses'
},
subtitle: {
text: 'An annotated chart in Highcharts'
},
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 15
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 27.98,
y: 255
},
text: 'Arbois'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 45.5,
y: 611
},
text: 'Montrond'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 63,
y: 651
},
text: 'Mont-sur-Monnet'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 84,
y: 789
},
x: -10,
text: 'Bonlieu'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 129.5,
y: 382
},
text: 'Chassal'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 159,
y: 443
},
text: 'Saint-Claude'
}]
}, {
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 101.44,
y: 1026
},
x: -30,
text: 'Col de la Joux'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 138.5,
y: 748
},
text: 'Côte de Viry'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 176.4,
y: 1202
},
text: 'Montée de la Combe<br>de Laisia Les Molunes'
}]
}, {
labelOptions: {
shape: 'connector',
align: 'right',
justify: false,
crop: true,
style: {
fontSize: '0.8em',
textOutline: '1px white'
}
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 96.2,
y: 783
},
text: '6.1 km climb<br>4.6% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 134.5,
y: 540
},
text: '7.6 km climb<br>5.2% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 172.2,
y: 925
},
text: '11.7 km climb<br>6.4% on avg.'
}]
}],
xAxis: {
labels: {
format: '{value} km'
},
minRange: 5,
title: {
text: 'Distance'
}
},
yAxis: {
startOnTick: true,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
labels: {
format: '{value} m'
}
},
tooltip: {
headerFormat: 'Distance: {point.x:.1f} km<br>',
pointFormat: '{point.y} m a. s. l.',
shared: true
},
legend: {
enabled: false
},
series: [{
data: elevationData,
lineColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[2],
fillOpacity: 0.5,
name: 'Elevation',
marker: {
enabled: false
},
threshold: null
}]
});
What I want is that when a user clicks on the chart, get the marker circle position
It is for use with the annotations plugin, get the coordinates of that point or circle, and create a note right there
To make it clear, this point:
Line chart
I solved my problem
using the data array, and with the following code
events:{
click: function(e){
var x = e.xAxis[0].value,
y = elevationData[x.toFixed(1)*10][1];
this.addAnnotation({
xValue: x,
yValue: y,
allowDragX: false,
allowDragY: false,
title:{
text: "Hola"
} ,
shape: 'text'
});
//this.redraw();
this.redrawAnnotations();
console.log(this.annotations);
}
}
The link below is the example of bubble overlapping, I want to know if I can show the data-label of the top overlapping bubble. In this case, show the label of the yellow bubble which is 'DE'.
- Example of overlapping
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 50, y: 50, z: 50, name: 'BE', country: 'Belgium', color:'red' },
{ x: 50, y: 51, z: 50, name: 'DE', country: 'Germany', color:'yellow' },
{ x: 100, y: 100, z: 50, name: 'DE', country: 'Germany' }]
}]
});
});
Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.
Need to add vertical lines and horizontal bars according to values displayed in chart.
Here is my code:
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
},
yAxis: {
title: {
text: 'Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Heart Rate',
data: data_arr
}]
});
For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements.
Check the following example:
$(function() {
$('#container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50, 60, 70]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
// the button action
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
$button.click(function() {
for (i = 1; i < chart.xAxis[0].categories.length; i++) {
if (chart.xAxis[0].categories[i] > 30) {
chart.xAxis[0].addPlotLine({
value: i,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}
}
});
});
To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:
For lines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
For Band
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
You can read more here:
http://api.highcharts.com/highcharts#xAxis.plotBands
http://api.highcharts.com/highcharts#xAxis.plotLines
Check the following example jsfiddle
$(function() {
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
plotLines: [{
color: 'blue',
width: 1,
value: 1,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 2,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 3,
dashStyle: 'longdashdot',
zIndex: 3
}],
zIndex: 3,
},
yAxis: {
title: {
text: 'Rate'
},
plotBands: [{ // mark the weekend
color: '#BEE9B4',
from: 1,
to: 4
}, { // mark the weekend
color: '#EB813B',
from: 4,
to: 6
}, { // mark the weekend
color: '#E93A0F',
from: 6,
to: 8
}],
zIndex: 2,
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
type: 'spline',
name: 'Heart Rate',
data: [4, 5, 1, 2, 8, 7, 4, 1]
}]
});
});
In highcharts type bubble (X-axis:dates, Y-axis:persons), what options I should use in order to have the Y-axis displays each person with a horizontal line so that it intersects with the X-axis line and have the bubble in the intersection.
I used a list of persons as 'categories' but it does not look good.
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Chart'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1,
title: {
text: 'Date'
}
},
yAxis: {
categories: ['person A', 'person B', 'person C', 'person D', 'person E'],
startOnTick: false,
endOnTick: false,
title: {
text: 'People'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>Title</h3></th></tr>' +
'<tr><th>Person:</th><td>{point.y}</td></tr>' +
'<tr><th>Date:</th><td>{point.x}</td></tr>' +
'<tr><th>Number of calls:</th><td>{point.z}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.z} calls'
}
}
},
series: [{
data: [
{ x: Date.UTC(2003, 9, 21), y: 1, z: 13},
{ x: Date.UTC(2003, 9, 30), y: 2, z: 14},
{ x: Date.UTC(2003, 9, 21), y: 2, z: 16},
{ x: Date.UTC(2003, 9, 30), y: 1, z: 7},
{ x: Date.UTC(2003, 9, 21), y: 3, z: 5},
{ x: Date.UTC(2003, 9, 30), y: 4, z: 8 }
]
}]
});
Current Chart
Expected chart (The lines I crossed need to be shifted to the position in red)
You need to set tickmarkPlacement as 'on' value.
yAxis: {
categories: ['person A', 'person B', 'person C', 'person D', 'person E'],
tickmarkPlacement: 'on',
startOnTick: false,
endOnTick: false,
title: {
text: 'People'
},
maxPadding: 0.2
},
Example: http://jsfiddle.net/hqykwrjd/