I have a Highcharts pie graph that I need to show multiple labels for each slice, such as an indicator (title) label with a connector on the outside of the slice, and a percentage label without connectors inside the slice.
I can set the distance property in order to bring the label (and the connector) to inside part of the slice but then, of course, there is no label outside anymore.
Any help would be greatly appreciated.
Thank you in advance.
There is no direct possibility to create multiple dataLabels. As you can see on this post, a solution would be to create two overlaying charts.
See JSFiddle here :
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
y:100
},
title: {
text: 'sfs '
},
yAxis: {
title: {
text: ' '
}
},
plotOptions: {
pie: {
// y:1,
shadow: false,
// center: ['50%', '50%'],
borderWidth: 0,
showInLegend: false,
size: '80%',
innerSize: '60%'
,
data: [
['allo', 18],
['asdad', 14],
['asdad', 11],
['asdasd', 10],
['adad', 8],
['asdada', 7],
['adada ada', 7],
['adad', 5],
['asdas',7],
['ada', 3]
]
}
},
tooltip: {
valueSuffix: '%'
},
series: [
{
type: 'pie',
name: 'Browser share',
dataLabels: {
color:'white',
distance: -20,
formatter: function () {
if(this.percentage!=0) return Math.round(this.percentage) + '%';
}
}
},
{
type: 'pie',
name: 'Browser share',
dataLabels: {
connectorColor: 'grey',
color:'black',
// y:-10,
softConnector: false,
connectorWidth:1,
verticalAlign:'top',
distance: 20,
formatter: function () {
if(this.percentage!=0) return this.point.name;
}
}
}
]
});
});
Related
I try using highchart in react-native to show 6 data from the state, and it works the data shown. But because the 6 data have same X and Y, so the data were shown but stacking so it looks like there is only one data (the X is the time when the data get the post, and the Y the day when the data get the post). Is there any way to make the data all appear in the chart.
This is the chart look like :
This is my highchart conf :
var conf= {
chart: {
type: 'scatter',
backgroundColor: '#233767',
zoomType: 'xy',
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
style:{
color:'white'
}
},
},
yAxis: {
type: 'datetime',
lineWidth: 1,
dateTimeLabelFormats: {
minute: '%H:%M'
},
labels: {
style:{
color:'white'
}
},
title: {
enabled: false
},
gridLineColor:'transparent'
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: false,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
Highcharts.dateFormat('%H:%M:%S', this.y);
},
},
credits: false,
exporting: false,
legend: {
itemStyle: {
color: '#FFFF',
fontWeight: 'bold'
}
},
title: false,
series: this.state.chartState
}
You can for example distinguish points by using different radius:
series: [{
data: [
[10, 10]
],
marker: {
radius: 10
}
}, {
data: [
[10, 10]
],
marker: {
radius: 5
}
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/tm0v6fw4/
API Reference: https://api.highcharts.com/highcharts/series.scatter.marker.radius
Or use multiple axis with different scale:
series: [{
data: [
[10, 10]
]
}, {
data: [
[10, 10]
],
yAxis: 1
}, {
data: [
[10, 10]
],
yAxis: 2
}]
Live demo: https://jsfiddle.net/BlackLabel/qwj4mu7n/
API Reference: https://api.highcharts.com/highcharts/yAxis
I want to show 2 data labels inside pie charts with drill-down. I know this is possible by overlaying 2 pie with different data labels. However, in the drill down, it's only showing 1 data labels, which is the last one I put (the first data label is being ignored by highcharts).
Here is my attempt:
https://jsfiddle.net/firstlutfi/a3v3mhef/
$('#chart').highcharts({
chart: {
type: 'pie'
},
xAxis: {
type: 'category'
},
tooltip: {
headerFormat: '<span style="font-size:10px">{series.name}</span><br>',
pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
percentageDecimals: 0
},
plotOptions: {
pie: {
size: '80%',
cursor: 'pointer',
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: 'jakarta_sales'
}, {
name: 'New York',
y: 5000000,
},
]
},
},
series: [{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format: '{point.percentage:.2f}%'
},
},{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>:<br/> ' + this.y + ' ';
}
}
}],
exporting: {
enabled: true,
},
drilldown: {
series: [
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format:'{point.percentage:.2f}%'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
format:'{point.name}:<br/> {point.y}'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},]
}
});
Update:
click on the jakarta data, and you'll get this
The result that i want is to have 2 labels in the drilldown. one is the amount (on the outside of the pie), and the percentage (inside the pie).
Is anyone know how to use 2 data labels (inside and outside) every chart including the drill down?
Thank you.
I see you use workaround to render multiple-labels per point by using two pie charts. Problem with that solution is.. you can not drilldown from one pie chart to multiple pie charts (ID's are unique).
Reminder: there is also another solution: Highcharts. Pie chart. DataLabels formatter
In your case, try async-drilldown (see details in drilldown event) instead:
https://jsfiddle.net/BlackLabel/a3v3mhef/77/
Snippets:
create the event:
chart: {
type: 'pie',
events: {
drilldown: function (e) {
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[0]);
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[1]);
this.applyDrilldown();
}
}
},
enable drilldown on a point:
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: true // just enabled, no ID
}, {
name: 'New York',
y: 5000000,
}]
setup series references:
var drilldownSeries = [{ ... }, { ... }];
I need to create a line chart where the xAxis would show vertical gridlines instead of horizontal ones, just like in "charts: {inverted: true}" case (example on the screen below).
vertical gridlines effect
Unfortunately, that solution isnt' entirely accurate because it switches the order of the data as well, so in fact the Distance scale ends up at the side of the chart, while it should be at the bottom of it, like here:
proper data order but with horizontal gridlines
My question is: is there a way to make gridlines display vertically without switching the order of the data?
Here's the exemplary chart from Highcharts demo, where I would like to change the display of the gridlines:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
labels: {
formatter: function () {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
PS I would prefer not to tamper with the order of the data that's being passed to the function.
Have you consider using xAxis.gridLineWidth and xAxis.gridLineColor parameters?
http://api.highcharts.com/highcharts/xAxis.gridLineWidth
http://api.highcharts.com/highcharts/xAxis.gridLineColor
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
gridLineWidth: 1,
labels: {
formatter: function() {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
gridLineWidth: 0,
labels: {
formatter: function() {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [
[0, 15],
[10, -50],
[20, -56.5],
[30, -46.5],
[40, -22.1],
[50, -2.5],
[60, -27.7],
[70, -55.7],
[80, -76.5]
]
}]
});
});
Here you can see an example how it can work:
http://jsfiddle.net/r3wd8j7t/1/
I wonder is it possible to change line color in highchart for specific y range using some kind of function, I really don't know how to achieve this, this is my idea, as a beginner I don't know how to write function to do this, function which I want to develop would like this
Added in fiddle have a look FIDDLE
function range(ystart,yend,ycolor,xpoint){
// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color
// So I would like to call like this
range(1,6,"#F90B0B",34)
}
This is actual code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6],
[24, 7],
[19,8],
[15, 9]
]
}]
});
});
Thank in advance for all volunteers
The easiest way would be to separate the data and create separate series (with different colors) for the different ranges. That would mean, of course, that you would have to create a custom legend.
Edit to your function:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6]
],
color: "#F90B0B"
},
{
name: 'Test Plot2',
data: [
[28, 6],
[24, 7],
[19,8],
[15, 9]
],
color: "#F909F9"
}]
});
});
At this moment is it not supported, only by two series, but in the nearest feature it should be available.
The following example is located at jsfiddle with the following link. http://jsfiddle.net/KWqU2/2/
Both Highcharts have a backgroundColor set within the chart options configuration.
The problem seems to be that no matter what I set the backgroundColor property to, the second chart defaults to the default and ignores whatever setting I have specified. My goal is to have both chart backgrounds transparent. I have tried backgroundColor:null, backgroundColor:'Transparent', backgroundColor:'rgba(255,255,255,0.1)' nothing seems to work.
Any ideas would be appreciated.
Here's the code for both charts:
var chart;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
backgroundColor:'#000000',
size:'100%'
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 1],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
var chart2;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
legend:{
enabled: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 10],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
You are doing it wrong, chart2 is not an option. Change this :
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
To this :
$('#container2').highcharts({
chart: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
See the updated jsFiddle