how can I remove all the spacing? except margin and spacing
Demo: http://jsbin.com/jukobenaso/edit?html,js,output
Screenshot
As the chart's height is 200:
$('#chart').highcharts({
chart: {
type: 'pie',
height: 200,
so you could set series size to 200 as well:
plotOptions: {
pie: {
showInLegend: true,
tooltip: {
enable: false
}
},
series: {
marker: {
enabled: false
},
dataLabels: {
enabled: false
},
enableMouseTracking: false,
size: 200,
innerSize: '80%',
center: [80, '50%']
}
},
Example: http://jsbin.com/kobunigami/edit?html,js,output
Related
This code is displaying the legends as circle, <<<
I want to display the legends as bar as shown in the below image.
My requirement is the legends should be displayed as bar instead of circles
Here you can take a look at my code:
Highcharts.chart('flow', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
width: 500,
height: 260,
style:{
marginBottom:"30px"
}
},
title: {
text: 'Flow',
x: 90,
y: 80,
style:{
fontSize:"25px",
fontWeight:600
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance:-30,
color:'white',
fontSize:'9px',
format: '{point.percentage:.1f} %',
style: {
textOutline: false
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
x: -100,
y: 90,
},
series: [{
name: 'Flow',
colorByPoint: true,
data: [{
name: 'Owned',
y: 74,
color:"#f5990f"
},{
name: 'Invited',
y: 36,
color:"#fce61e"
}]
}]
});
Highcharts.chart('flow', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
width: 500,
height: 260,
style:{
marginBottom:"30px"
}
},
title: {
text: 'Flow',
x: 90,
y: 80,
style:{
fontSize:"25px",
fontWeight:600
}
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance:-30,
color:'white',
fontSize:'9px',
format: '{point.percentage:.1f} %',
style: {
textOutline: false
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
x: -100,
y: 90,
},
series: [{
name: 'Flow',
colorByPoint: true,
data: [{
name: 'Owned',
y: 74,
color:"#f5990f"
},{
name: 'Invited',
y: 36,
color:"#fce61e"
}]
}]
});
I would appreciate any help that I can get to achieve this. Thanks!
You can create additional column charts and place them under the legend items:
chart: {
events: {
load: function() {
var columnChart1 = Highcharts.chart("columnChart1", columnChartOptions),
columnChart2,
xPos = this.legend.group.translateX,
yPos = this.legend.group.translateY,
items = this.legend.allItems;
columnChartOptions.series[0].data = [76];
columnChartOptions.series[0].color = 'yellow';
columnChart2 = Highcharts.chart("columnChart2", columnChartOptions);
columnChart1.renderTo.style.top = yPos + 50 + 15 + items[0]._legendItemPos[1] + 'px';
columnChart1.renderTo.style.left = xPos + 'px';
columnChart2.renderTo.style.top = yPos + 50 + 15 + items[1]._legendItemPos[1] + 'px';
columnChart2.renderTo.style.left = xPos + 'px';
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wsc4be92/
In my Highcharts configuration for horizontal bar chart, when I add a custom pointWidth, I can not change the distance between the two bars.
Please notice the maxPointWidth: 8
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['Document', 'Image', 'Audio', 'CAD', 'Zip'],
title: {
text: 'File Type',
align: 'high',
offset: 0,
rotation: 0,
y: -10,
x: -15
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
style: {
}
}
},
yAxis: {
opposite: true,
title: {
text: '# Files',
align: 'middle',
style: {
/* TODO: Modify styles to accommodate the bars header */
color: '#000000'
}
},
tickInterval: 2,
gridLineColor: 'transparent',
labels: {
enabled: false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ('#FFFFFF'),
shadow: true,
enabled: false
},
credits: {
enabled: false
},
series: [{
name: '',
data: [56, 30, 15, 11, 5],
maxPointWidth: 8
}],
colors: this.colors || defaultColors
}
Here is the working JS fiddle:
https://stackblitz.com/edit/highcharts-angular-drilldown?file=app%2Fapp.component.ts
I want to reduce the spacing between the bars and the label and keep the maxPointWidth intact.
enter image description here
To reduce spacing between bars, reduce the chart height:
chart: {
type: 'bar',
height: 200
}
Live demo: http://jsfiddle.net/BlackLabel/msph2uca/
API: https://api.highcharts.com/highcharts/chart.height
How do I best achieve a solid gauge, where:
it is responsive with regards to title and main value font/sizes
the title can wrap on several lines,
also without leaving the padding seen in the screenshot below
Screen shot (desktop vs mobile):
Notes:
This is based off the official highcharts example here.
Here's my options code (from a gaugeComponent.ts):
var options: any = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '55%'],
// size: '140%',
startAngle: -140,
endAngle: 140,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: stops,
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
className: 'highcharts-gauge-heading',
title: {
text: this.gauge.title,
y: -80,
},
labels: {
x: -5,
y: 30
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
series: [{
name: this.gauge.title,
data: [this.gauge.value],
dataLabels: {
format: '<div style="text-align:left"><span style="font-size:30px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 300
},
chartOptions: {
yAxis: {
className: 'highcharts-gauge-heading-small'
}
}
}]
}
}
New to Highcharts, and was wondering if someone had a solution they'd developed for my issue. Finding when slices of my donut chart are small enough, their value labels overlap/impede on each other - has anyone found a solution before I go pulling it all apart? :)
Any advice appreciated!
I ended up with a solution...
Originally I was using:
options: {
chart: {
height: 320,
plotShadow: false,
plotBorderWidth: 0,
spacingBottom: 10,
type: 'pie',
},
credits: {
enabled: false
},
legend: {
align: 'center',
symbolRadius: 0,
floating: true,
layout: 'vertical',
y: -110
},
tooltip: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
showInLegend: true,
startAngle: 45,
dataLabels: {
allowOverlap: false,
distance: 10,
padding: 2,
softConnector: true,
className: 'pieLabels ',
format: '{y}',
useHTML: true,
enabled: true
},
shadow: false,
center: ['50%', '50%'],
size: '90%',
innerSize: '65%',
borderColor: 'none'
}
},
series: this.props.series
}
And ended up with :
options: {
chart: {
height: 320,
plotShadow: false,
plotBorderWidth: 0,
spacingBottom: 10,
type: 'pie',
},
credits: {
enabled: false
},
legend: {
align: 'center',
symbolRadius: 0,
floating: true,
layout: 'vertical',
y: -100
},
tooltip: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
showInLegend: true,
dataLabels: {
connectorWidth: 0,
distance: -25,
// overflow: 'none',
className: 'pieLabels ',
format: '{y}',
useHTML: true,
enabled: true
},
shadow: false,
center: ['50%', '50%'],
size: '100%',
innerSize: '60%',
borderColor: 'none',
},
},
series: this.props.series
}
Which gave me :
I'm using two series for a solid gauge and the fill amount is incorrect for one of the series. I've tried adjust the tickInterval, tickValue, min, max and it doesn't make a difference. Even if I set the value to 0 it's filled about over 50% of the way.
vm.ecoScoreData = {
options : {
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
type: 'solidgauge',
backgroundColor: '#F9F9F9',
margin: [0, 0, 0, 0],
height: 340
},
title: null,
legend: {
align: 'center',
layout: 'vertical',
labelFormatter: function () {
return '<span class="gauge-legend-item">' + this.name + '</span><span class="series-value">' + $filter('number')(this.yData[0]) + '</span>';
},
useHTML: true,
x: -10,
y: -20,
itemMarginTop: 4,
itemMarginBottom: 4
},
pane: {
center: ['50%', '70%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#305F2A',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc'
}
},
// the value axis
yAxis: {
minColor: '#74BC54',
maxColor: '#74BC54',
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
text: 'Connected Vehicles',
y: 40
},
labels: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -30,
borderWidth: 0,
useHTML: true
}
}
},
tooltip: {
enabled: false
}
},
series: [
{
name: 'Opt-In '+chartData.optInPercent+'%',
data: [{
name: 'Opt-In',
radius: 100,
innerRadius: 75,
y: chartData.optIn
}],
marker: {
symbol: 'square'
},
lineWidth: 0,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
},
dataLabels: {
formatter: function() {
return'<div style="text-align:center"><span style="font-size:18px;color:#707070">'+$filter('number')(chartData.connectedVehicles)+'</span></div>';
}
}
},
{
name: 'Opt-Out '+chartData.optOutPercent+'%',
data: [{
name: 'Opt-Out',
radius: 100,
innerRadius: 75,
y: 0
}],
marker: {
symbol: 'square'
},
lineWidth: 0,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
},
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:18px;color:#707070">{point.y:,.0f}</span></div>'
}
}
]
};