Does anyone if it's possible to create the following type of chart using Highcharts:
I was trying to use the Solid Guage type but couldn't find a way to incorporate a 2nd data series into the chart ?
You need to define a points in series and regular size and distance by innerRadius / outerRadius.
series: [{
name: 'Speed',
data: [{
name: 'First car',
radius: 100,
innerRadius: 80,
y: 80
}, {
name: 'Second car',
radius: 80,
innerRadius: 60,
y: 120
}],
dataLabels: {
enabled: true,
y:-10
},
tooltip: {
pointFormat: '{point.name}: <b>{point.y}</b> km/h'
}
}]
Example: http://jsfiddle.net/94akab33/2/
Missing elements can by added by renderer.
Related
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 am trying to achieve combined 2 Semidonut Pie Charts series to show Current year and Last year percentage with my data .
At the same time I am trying to overlay another series with data which will represent the YOY percentage increase or decrease which will appear as label outside my outer pie as "+50%" , "-60%"
Since YOY can be negative and this disturb's the Pie . I was reading that Pie is not ideal to put the negative numbers but visually in my usecase customer feels this will be great .
I tried to massage the YOY data with negative to multiply with (-1) and put into pie and I kind of able to represent the number outside pie but can't bring the "+" or "-" with "%" as valuesuffix .
I have working example here but again this is with 2 data series ... my 3rd series will be "YOY%" with the datalabel display outside which is not added here as 3rd series with negative bring a weird donut .
Anybody has idea how to implement this solution to represent series 3 with YOY Outside as regular datalabels ?
https://codepen.io/pauldx/pen/BayyJaa
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2017',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series: [{
type: 'pie',
innerSize: '50%',
dataLabels: {
enabled: true,
// inside: true,
distance: -70,
},
data: [
['LYA', 58.9],
['LYB', 28.9],
['LYC', 30.29],
]
},
{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
dataLabels: {
enabled: true,
// inside: true,
distance: -20,
},
data: [
['CYA', 20],
['CYB', 18.9],
['CYC', 70.29],
]
}]
});
As I understood - you would like to add only the dataLabels with calculated YOY value, am I right? Or do you want to add a whole series? If just a dataLabels - there is a guideline how to achieve it by adding custom dataLabels:
events: {
render() {
let chart = this,
yoyValue,
x,
y;
chart.series[1].points.forEach((p, i) => {
if (chart['label' + i]) {
chart['label' + i].destroy();
}
yoyValue = Math.floor(((p.y - chart.series[0].points[i].y) / p.y) * 100);
x = p.dataLabel.translateX - (p.shapeArgs.end == 0 ? -40 : 30);
y = p.dataLabel.translateY;
chart['label' + i] = chart.renderer.text(yoyValue + '%', x, y).attr({
zIndex: 100,
}).css({
fontWeight: 'bold',
color: 'white',
textOutline: '1px contrast'
}).add();
})
}
}
Demo: https://jsfiddle.net/BlackLabel/p82L4ad1/1/
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
I'm trying to create a Spider graph that has the y-axes labels offset with extended gridlines.
Is this possible to achieve with just one graph, or do I have to create two separate graphs and overlay them? I've tried ticklines, gridlines, and they all get stuck in the polar coordinates.
Here's my attempt at trying to accomplish this:
http://jsfiddle.net/6d6jrfhs/3/
{
chart: {
polar: true,
type: 'line'
},
title: {
text: "# of Impacts",
x: -80
},
pane: {
size: '80%',
startAngle: 0,
},
xAxis: {
categories: ['Back', 'Left', 'Front', 'Top',
'Right'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
offset: 0,
labels: {
align: 'left',
x: -100,
y: 0
},
tickLength: 500,
plotLines: [{
color: 'red', // Color value
dashStyle: 'longdashdot', // Style of the plot line. Default to solid
value: 40000, // Value of where the line will appear
width: 1 // Width of the line
}]
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
type:'area',
name: 'Low Impact',
data: [43000, 19000, 60000, 35000, 17000],
pointPlacement: 'off'
}, {
type:'area',
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000],
pointPlacement: 'off'
}]
}
This demo shows how to find labels (SVG elements) in the chart object and create additional gridline using SVG Renderer: http://jsfiddle.net/kkulig/eg7p3r48/
events: {
render: function() {
var yAxis = this.yAxis[0],
renderer = this.renderer,
label = yAxis.ticks[0].label;
renderer.path(['M', label.xy.x, label.xy.y, 'l', label.xy.x - xOffset - 30, 0]).attr({
stroke: 'black',
'stroke-width': 1
}).add();
}
}
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
I am trying to use the highcharts solid gauge, and I would like to have a legend, however Highcharts developers seem to have removed the color option from solid gauge series, which I believe is what the legend pulls it's color from.
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
color: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}],
showInLegend:true
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}],
showInLegend:true
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}],
showInLegend:true
}]
Jsfiddle
Is there any way to get my legend to match the series colors?
I haven't been able to figure out how to color the marker in the legend, but to me the markers don't make sense in this case anyhow. So, I've turned them off in my fiddle.
To color the text, you can use the legend labelFormatter function.
legend: {
labelFormatter: function() {
return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
},
symbolWidth: 0
},
http://jsfiddle.net/9dq2p7dw/21/
Just to add, Barbara's answer is still valid in 2019.
However, to remove the marker, you'll have to add
squareSymbol: false
I would have added this as a comment in her answer but I do not have enough reputation points.
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day