As you can see by my example I am trying to off center the Highcharts pie chart, but the label for the large section is off to the left and cropped. Is there a way to shift it more to the top where there is room? I also want to be able to move the connector as well. If I have to I am willing to hardcode a location in the container as the size will never change.
code:
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ','
},
chart: {
style: {
fontFamily: 'Myriad'
}
},
colors: [
'rgb(97,70,59)',
'rgb(129,123,59)',
'rgb(0,125,171)',
'rgb(240,50,46)',
'rgb(175,186,102)',
'rgb(228,21,58)',
]
});
var options = {
chart: {
renderTo: 'container',
align: 'top',
type: 'pie'
},
credits: {
enabled: false,
},
exporting: {
enabled: false
},
title: {
text: ''
},
plotOptions: {
pie: {
center: ['30%', '60%'],
animation: false,
borderWidth: 3,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
softConnector: false,
connectorWidth: 2,
formatter: function() {
return this.key + "<br>" + this.percentage.toFixed(2) + '%';
}
}
}
},
xAxis: {
categories: []
},
series : [],
};
var series = {
data: [
{
type:'pie',
name: 'Example 1',
y: 5000
},
{
type:'pie',
name: 'Example 2',
y: 2150
},
{
type:'pie',
name: 'Example 3',
y: 3000
},
{
type:'pie',
name: 'Example 4',
y: 8000
},
{
type:'pie',
name: 'Example 5',
y: 5000
},
{
type:'pie',
name: 'Example 6',
y: 50000
}
],
size: '85%', // added for the donut view
innerSize: '75%', // updated for the donut view
};
options.series.push(series);
var chart = new Highcharts.Chart(options);
});
At this moment this is default behavoir of chart. You can disable main dataLabels and use Renderer to add custom shapes like text or paths.
You can also post your suggestion in our userVoice service and vote for it.
Related
I have a stacked column/scatter chart with some dataLabels off to one side. The issue I am facing is that when my two markers begin to get close to one another, their dataLabels overlap
I need to always show both labels, so is there a way to detect when labels are overlapping and move the bottom one down by adjusting its y value based on how much overlap there is?
sample fiddle of the issue
Highcharts.chart('container', {
chart: {
type: 'column',
width: 500
},
title: {
text: 'Stacked column chart'
},
xAxis: {
visible: false,
},
yAxis: {
min: 0,
visible: false,
title: {
},
},
legend: {
layout:"vertical",
align: "right",
verticalAlign: "bottom",
itemMarginTop: 15,
y: -10,
x: -50
},
tooltip: {
enabled: false,
},
plotOptions: {
scatter: {
marker: {
symbol: "triangle",
},
dataLabels: {
enabled: true,
x: -80,
y: 50,
allowOverlap: true,
useHTML: true,
}
},
column: {
pointWidth: 70,
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
data: [100],
color: "#ededed"
}, {
name: '',
data: [500]
}, {
name: '',
data: [400]
},
{
type: "scatter",
data: [1000],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>Your goal of <br/>$"+ this.y +"<br/>text</div>"
},
}
},
{
type: "scatter",
data: [900],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>You are here <br/>$"+ this.y +"<br/>text</div>"
},
}
}]
});
You can correct data-labels positions by using the attr method on their SVG elements.
For example:
chart: {
events: {
render: function() {
const series = this.series;
const dl1 = series[3].points[0].dataLabel;
const dl2 = series[4].points[0].dataLabel;
if (dl1.y + dl1.height > dl2.y) {
dl2.attr({
y: dl1.y + dl1.height
});
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5Lmh4owb/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement.html#attr
https://api.highcharts.com/highcharts/chart.events.render
I have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
I need my piechart datalabels connectors to be straight lines and not curved ones which is by default for pie of Highcharts
what i want
image with straight connector lines
currently it looks like this
default pie with curved connector lines
Here is my code
Highcharts.chart('pieChart', {
chart: {
height: 274,
borderColor: ''
},
tooltip: {
enabled: false
},
colors: [
''
],
plotOptions: {
pie: {
allowPointSelect: true,
startAngle: 170,
borderWidth:0,
dataLabels: {
enabled: true,
format: '<b>{point.percentage:f}%</b><br>{point.name} ',
style: {
fontWeight:'normal',
}
},
colors: [
'#8cdfff',
'#a6e6ff',
'#67d5ff',
'#3ac9ff',
'#00b5fa',
],
}
},
series: [{
data: [{
name: 'No Reason',
y: 12
}, {
name: 'Sick',
y: 13
}, {
name: 'Sent away',
y: 15
}, {
name: 'Paid Leave',
y: 20
}, {
name: 'Vacation',
y: 40
}],
sliced: true,
selected: true,
dataLabels: {
style: {
fontFamily: 'Inter UI',
fontSize: '12px',
color: '#282d32',
}
},
point: {
events: {
mouseOver: function (e) {
this.dataLabel.css({
fontWeight: "bold"
// color: "#4d5c61"
});
},
mouseOut: function (e) {
this.dataLabel.css({
fontWeight: "normal"
// color: "#808f9e"
});
}
},
},
type: 'pie'
}],
title: {
text: '',
},
subtitle: {
text: ' ',
}
});
If some kind soul can help me with it, I would really appreciate that.
The default options are in series.pie.dataLabels.connectorShape (API). You can choose between fixedOffset (default), straight crookedLine or a function returning a SVG path.
You might want to choose crookedLine, as seen in this JSFiddle demo. This is useful to combine with crookDistance (API). If you want to make it a specific shape you can also make it a function that returns a SVG path as seen in this JSFiddle demo.
Example usage in options:
series: [{
dataLabels: {
connectorShape: 'crookedLine',
crookDistance: '70%'
},
//...
}]
I have a custom HighCharts that have totals in the legend. I need to add one line of custom text centered under the totals "in the legend". Also I need to add text center at the bottom of the chart "under the legend".
See fiddle:
http://jsfiddle.net/no1uknow/cvsTB/
[EDIT]
I did figure this much out but don't know how to get text centered under legend.
http://jsfiddle.net/no1uknow/cvsTB/1/
$(function () {
var chart;
$(document).ready(function() {
var container_chartFreqAtaTailNum = new Highcharts.Chart({
chart: {
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 795
},
title: {
text: 'Frequency by Tail Number'
},
subtitle: {
text: 'Fact ATA (25)'
},
xAxis: {
categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'],
title: {
text: 'Tail Number'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '5421',
data: [117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317]
},{
name: 'Intermediate',
total: '4888',
data: [299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277]
},{
name: 'Line',
total: '659',
data: [29,38,50,47,33,27,22,67,57,44,36,53,41,37,35,43]
},{
name: 'Lite',
total: '2172',
data: [101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116]
}]
});
});
});
spacingBottom is what you need to add, and also you need to take care of the offset:
chart: {
events: {
load: function () {
var label = this.renderer.label("How do I move this center and under the legend.")
.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 // set the right offset
}), null, 'spacingBox');
}
},
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 895,
spacingBottom: 100 // The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).
}
Here is the fiddle: http://jsfiddle.net/uMBHf/1/
I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link