3 slices in my pie chart fall under same category. It's the gray slices (174, 29, 234). Is it possible to overlay text on cover all 3 slices. Can the overlay text be rotate or curved in order to cover the grey slices.
Here is my working fiddle: https://jsfiddle.net/1h8p257c/
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1',
y: 234,
color:'#808080',
legendIndex: 1
}, {
name: 'Consent Order 2',
y: 29,
color:'#C0C0C0',
legendIndex: 2
}, {
name: 'Consent Order 3',
y: 174,
color:'#DCDCDC',
legendIndex: 3
},{
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
If they're all the same category, why not just combine them like so:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1 - 3',
y: 437,
color:'#808080',
legendIndex: 1
}, {
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>
<div id="container"></div>
Or does the separation matter?
You can use Highcharts.SVGRenderer to add additional text to the chart:
events: {
load: function(){
var center = this.series[0].points[2].shapeArgs;
this.renderer.text(
'someText',
center.x + this.plotLeft - 20,
center.y + this.plotTop + 50
).attr({
fill: 'red',
'font-size': '20px',
rotation: -45,
zIndex: 10
})
.add();
}
}
Live demo: https://jsfiddle.net/BlackLabel/t04gqy2h/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Related
I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.
As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).
How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F.
Code:
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
chart: {
renderTo: 'container',
height: 500,
alignTicks: false
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: false
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 10,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Main Power',
type: 'spline',
yAxis: 1,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Signal Strength',
type: 'spline',
yAxis: 2,
data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
tooltip: {
valueSuffix: ' °F'
}
}]
});
Removed the "percent" in:
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
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]
}]
});
});
The x-axis label disappears for a polar chart with any endAngle other than default (360)
Works without endAngle: http://jsfiddle.net/qs5v601b/1/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does not work with endAngle : http://jsfiddle.net/qtpq84nw/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%',
endAngle: 90
},
xAxis: {
categories: ['Sales', 'Marketing'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does anyone know what is causing this?
You need to enable showLastLabel parameter.