I have a Grouped Column Series mapped, 3 columns in a group.
I would like to add scatter points over each of the three columns within each group.
Each scatter point would be centered over each column in the group.
Does anyone have any suggestions or experience with this type of functionality?
Best,
Stu
Something like this isn't directly supported, but possible to achieve, take a look: http://jsfiddle.net/3bQne/229/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012','01/03/2012','01/04/2012','01/05/2012','01/06/2012','01/07/2012']
},
series: [{
type:'column',
data: [3,4,5]
},{
type:'column',
data: [5,4,2]
},{
type:'column',
data: [3,1,5]
},{
type:'scatter',
data: [{
x: -0.2,
y: 1
},{
x: 0,
y: 3
},{
x: 0.2,
y: 2
}]
}]
});
Related
I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?
The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis
I have two series, to display both I created two xAxis and two yAxis. I need to show gridlines for both x and yaxis gridlines. But I found that xAxis grid lines are extended to second axis. Here is my code:
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
yAxis: [{
gridLineWidth: 2,
height: '90%'
}, {
top: '100%',
height: 45,
gridLineWidth: 2
}],
xAxis: [{
gridLineWidth: 2
},{
top: '100%',
height: 45,
gridLineWidth: 2
}],
series: [{
name: 'USD to EUR',
data: usdeur
},
{
name: 'USD to EUR',
data: usdeur,
xAxis: 1,
yAxis : 1,
}]
});
Here is a jsFiddle:
https://jsfiddle.net/Subhabrata/85sztqw6/6/
Here is my intention:
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
I need to use a "name" attribute for the X axis, so I can put the name of the month.
I can not therefore use an array of values within the data attribute. So I can not use something of this kind data:[12,13,45];
Using something like this:
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line'
},
series: [{
colorByPoint: true,
data: [{
name: 'Septiembre',
y: 1687
}, {
name: 'Octubre',
y: 2085
}]
}],
});
Reproduction online
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/