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
Related
I have a problem to align titles on xAxis to the left and right like on the picture. I've tried by adding html tags and inline styles to achieve this, but it's not working. Here's my code:
xAxis: [{
type: 'category',
labels: {
step: 1,
},
scrollbar: {
enabled: true,
},
min: 0,
categories: [],
title: {
align: 'high',
rotation: 0,
y: -20,
x: 60,
text: subtitleOne,
style: {
"fontSize": "14px",
"fontWeight": "bold",
"textAlign": "left"
}
}
}, {
offset: 0,
tickLength: 0,
lineWidth: 0,
title: {
align: 'high',
rotation: 0,
y: -20,
x: 45,
text: subtitleTwo,
style: {
"fontSize": "14px",
"fontWeight": "bold"
}
}
}]
What am I doing wrong?
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/
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>'
}
}
]
};