We Keep Coding

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}

You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

How to add text to the bottom of a Highchart, but above the legend?

I want to add some text or image under a Highchart, but it must appear above the Highchart legend.
My code:
$(function () {
Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'drawPoints', function (proceed) {
proceed.apply(this);
for (i in this.data) {
if(this.data[i].options.x > 90)
this.data[i].graphic.dashstyleSetter(this.options.dashStyle || 'solid');
}
});
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Highcharts Bubbles'
},
series: [{
dashStyle: 'dash',
data: [
[97, 36, 79],
[94, 74, 60],
[68, 76, 58],
[64, 87, 56],
[68, 27, 73],
[74, 99, 42],
[7, 93, 87],
[51, 69, 40],
[38, 23, 33],
[57, 86, 31]
],
marker: {
lineColor: 'red'
}
}]
});
});
Here's my JsFiddle: http://jsfiddle.net/qebxk6ty/6/
I want to add a static image or text underneath the chart, but above the legend to indicate what the dashed bubbles mean.
This answer shows how to add it below the legend:
How do you add text to the bottom center of legend and bottom center of chart under legend?
I am at a loss as to how to modify it.
Thanks in advance.

You can do this,
$('#container').highcharts({
xAxis: {
title: {
text: "DISPLAY WHATEVER YOU WANT TO"
}
},
DEMO
EDIT
chart: {
events: {
load: function () {
var label = this.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
.css({
width: '450px',
color: '#222',
fontSize: '16px'
})
.attr({
'stroke': 'silver',
'stroke-width': 2,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'bottom',
y: 50 // offset
}), null, 'spacingBox');
}
},
DEMO

Increase chart.spacingBottom and legend.y properties.
chart: {
spacingBottom: 100,
},
legend: {
y: 100
},
Render label/image, align it and set its y property.
function renderLabel() {
var label = this.renderer.label("How do I move this center and under the legend.")
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'bottom',
y: 60 // offset
}), null, 'spacingBox');
}
Values are mostly hardcoded but if you want to do it in a dynamic way then you need to set the values based on label/img height.
example: http://jsfiddle.net/qebxk6ty/7/

Was dealing with same issue but with Pie Chart as xAxis title doesn't work with PIE chart I solved it with positioning legend and subtitle both.
// Data retrieved from https://netmarketshare.com
Highcharts.chart('container', {
chart: {
type: 'pie',
marginBottom: 100 // Increase the margin to make room for the subtitle and legend
},
title:{
text: 'Browser market shares at a specific website, 2014'
},
subtitle: {
text: 'Source: Wikipedia.org',
align: 'center',
verticalAlign: 'bottom',
style: {
fontSize: 20,
},
y: -20 // Adjust the y position of the subtitle
},
legend: {
align: 'center',
verticalAlign: 'bottom',
y: 50 // Adjust the y position of the legend
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
});

Highcharts show percentage in the center of the solid gauge chart

I am very new to Highcharts. I am trying to use the solid gauge. The problem is that the percentage text is not present in the center. Is there anyway to put the percentage in the center of the chart?
Here is the code:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'solidgauge'
},
title: {
text: ''
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
center: ['50%', '27%'],
startAngle: 0,
endAngle: 360,
background: [{ // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
});
The x and y in the label option can set the position but I want it to be dynamic.
Secondly I want it to be always shown. Here is the result of the code above.

Gradient background bars in Highchart bar chart

My problem is changing background bars in a highchart bar chart. I can change bars to a specific color like below but I want to make it gradient.
In this code I used red color (FF0000) in chart options. How to change it for gradient backgroud?
HTML :
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
JS :
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
colors: [
'#ff0000'
],
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [10, 31, 63, 3, 28]
}]
});
});
JSFiddle

JsFiddle
Please refer above fiddle to check the results
First, declare a gradient as per Highcharts
const color_grad1 = {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#fdfc47'],
[1, '#24fe41']
]
};
Then use gradient as follows:
data: [{y: 10, color: color_grad1}, 31, 63, 3, 28]

HighCharts JS - Getting multiple linear underlays on a scatter plot

I'm trying to make some visualisations using the HighCharts javascript library, mainly I'm hoping to make something very similar to what these guys have on their page:
Research Affiliates - 10Yr Expected Risk & Return
Mainly, I'm trying to work out how they managed to get the 2 solid linear areas on the scatter graph that represent the different Sharpe Ratio levels. Is it just a background image, or have they somehow underlayed an area chart under the scatter chart?
Has anybody got any experience with this, or how to code it?

On the web page you are referring to area type series are used to generate triangular shapes in the background.
Area chart demo: http://www.highcharts.com/demo/area-basic
Area chart API reference: http://api.highcharts.com/highcharts#plotOptions.area

Basically, you can combine any kind of chart type.
See their demo of a scatter plot with a regression line.
As an example of a scatter plot combined with a stacked area chart, see the following code and fiddle:
var Y_MAX = 6;
var X_MAX = 5;
$(function () {
$('#container').highcharts({
title: {
text: 'Scatter plot with stacked area ratio chart'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
xAxis: {
min: 0,
max: X_MAX
},
yAxis: {
min: 0,
max: Y_MAX
},
series: [{
type: 'area',
name: 'Ratio',
data: [{x: 0, y: 0}, {x: X_MAX, y: 0.4*Y_MAX}]
}, {
type: 'area',
name: 'Ratio',
data: [{x: 0, y: 0}, {x: X_MAX, y: 0.6*Y_MAX}]
}, {
type: 'scatter',
name: 'Observations',
data: [1, 0.5, 3.8, 5.5, 3.9, 2.2],
marker: {
radius: 8
}
}]
});
});
Fiddle

Thanks for the heads up on how to combine two charts.
What I actually ended up using was the Polygon Plot type rather than an Area Chart.
I also rendered the labels using Chart.renderer.label.
Still tweaking this, but as a whole reference this is my code (minus data taken out)
$(function () {
$('#scatter-plot').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Expected Asset Return Against Volatility'
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'Volatility',
enabled: true,
style: {
fontWeight: 'bold',
fontSize: '18px',
fontFamily: 'PT Sans',
}
},
min: 0,
lineWidth: 0,
lineColor: '#bfbfbf',
gridLineWidth: 0,
tickWidth: 0,
labels: {
format: '{value} %',
style: {
fontSize: '14px',
fontFamily: 'Arial',
}
}
},
yAxis: {
title: {
text: 'Real Expected Returns',
style: {
fontWeight: 'bold',
fontSize: '18px',
fontFamily: 'PT Sans',
},
enabled: true
},
gridLineWidth: 0,
lineWidth: 1,
endOnTick: true,
maxPadding: 0,
startOnTick: true,
minPadding: 0,
lineColor: '#bfbfbf',
minRange: 2,
plotLines: [{
color: '#bfbfbf',
width: 1,
value: 0,
zIndex: 5
}],
labels: {
format: '{value} %',
style: {
fontSize: '14px',
fontFamily: 'Arial',
}
}
},
series: [
{
type: 'polygon',
color: 'rgba(100,100,100, 0.1)',
data: [[0, 0], [20, 10], [20, 0]]
},
{
type: 'polygon',
color: 'rgba(100,100,100, 0.1)',
data: [[0, 0], [20, 20], [20, 0]]
},
{type: 'scatter',
marker: {
radius: 10,
symbol: 'circle',
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
dataLabels: {
enabled: true,
x: -8,
y: -8,
fontFamily: 'PT Sans',
color: 'rgba(50, 50, 50, 0.8)',
format: '{series.name}'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Volatility: {point.x}%<br>Exp. Return: {point.y}%'
},name: 'United-States',color: 'rgba(215, 40, 40, 0.6)',data: [[15.8,5.9]]},
//Rest of the data here, repeating in the same format as above^^
},
function (chart) { // on complete
chart.renderer.label('<div style="font-size:18px;">0.1 Sharpe Ratio</div>',
$(chart.container).width() - 200,
$(chart.container).height() - 150,
true)
.css({
color: 'rgba(0,0,0,0.5)'
})
.add();
chart.renderer.label('<div style="font-size:18px;">0.2 Sharpe Ratio</div>',
$(chart.container).width() - 200,
$(chart.container).height() - 250,
true)
.css({
color: 'rgba(0,0,0,0.5)'
})
.add();
});
});
And it produced this result:
Thanks again for the tips!