How can I revert my theme back to the default one in Highcharts after I have applied some theme?
I tried this but doesn't work.
Highcharts.theme = {
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
I tried also the solution described here
removing all of the color options from the code below and reloading
the Highcharts object will make it default to the basic theme
...but it doesn't work either.
Thanks
Unforunately you need to overwrite all colors / parameters with default values for a second chart.
http://jsfiddle.net/WNGpQ/2/
var theme = {
colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970',
'#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
chart: {
backgroundColor: '#fff',
borderWidth: 0,
plotBackgroundColor: '#fff',
plotShadow: false,
plotBorderWidth: 0
},
title: {
style: {
color: '#274b6d',//#3E576F',
fontSize: '16px'
}
},
subtitle: {
style: {
color: '#4d759e'
}
},
xAxis: {
gridLineWidth: 0,
lineColor: '#C0D0E0',
tickColor: '#C0D0E0',
labels: {
style: {
color: '#666',
cursor: 'default',
fontSize: '11px',
lineHeight: '14px'
}
},
title: {
style: {
color: '#4d759e',
fontWeight: 'bold'
}
}
},
yAxis: {
minorTickInterval: null,
lineColor: '#C0D0E0',
lineWidth: 1,
tickWidth: 1,
tickColor: '#C0D0E0',
labels: {
style: {
color: '#666',
cursor: 'default',
fontSize: '11px',
lineHeight: '14px'
}
},
title: {
style: {
color: '#4d759e',
fontWeight: 'bold'
}
}
},
legend: {
itemStyle: {
color: '#274b6d',
fontSize: '12px'
},
itemHoverStyle: {
color: '#000'
},
itemHiddenStyle: {
color: '#CCC'
}
},
labels: {
style: {
color: '#3E576F'
}
},
navigation: {
buttonOptions: {
theme: {
stroke: '#CCCCCC'
}
}
}
};
Related
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>'
}
}
]
};
I generate a stacked bar graph with Highcharts, and I have a problem with my interval between labels.
My data interval is only 6 and the labels interval generated by highchart is 100, see demo here : http://jsfiddle.net/NjaEw/2/
I want a label interval corresponding from data.
Here the code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<h1>Testing</h1>
<div id="conformity-by-page" style="width: 100%; height:250px; margin: 0 auto"></div>
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'conformity-by-page',
type: 'bar',
borderWidth: 1,
borderColor: '#000',
borderRadius: 0,
marginTop: 50
},
exporting: {
enabled: false
},
title: {
text: ''
},
xAxis: {
lineWidth:5,
categories: ['Web site'],
//tickWidth: 0,
title: {
text: null
},
labels: {
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
}
}
},
yAxis: {
lineWidth:0,
title: {
text: 'Number of page',
align: 'high',
style: {
color: '#000000',
fontSize: '16px'
}
},
labels: {
overflow: 'justify',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
}
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' règles';
},
backgroundColor: '#FFFFFF',
style: {
color: '#000',
fontSize: '14px',
padding: '5px'
}
},
plotOptions: {
bar: {
borderColor: '#000000',
borderWidth: 1,
/*minPointLength: 10,*/
pointWidth: 25,
stacking: 'percent',
dataLabels: {
enabled: true
}
}
},
legend: {
verticalAlign: 'top',
backgroundColor: '#FFFFFF',
reversed: true,
shadow: true,
symbolWidth: 50,
itemStyle: {
color: '#000000',
fontSize: '15px'
}
},
credits: {
enabled: false
}, series: [{
name: 'Warning',data: [null], color: '#FFFF40',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}, {
name: 'Error',data: [3], color: '#FF8080',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}, {
name: 'N/A',data: [1], color: '#B5EBFB',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}, {
name: 'OK',data: [2], color: '#80FF80',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}]
});
});
The problem is that you're using stacking: 'percent'.
Change it to 'normal'.
Demo