I'm just starting to play around with highcharts. I've found that when setting the color attribute it doesn't actually set that specific hex color - rather it only displays that exact hex color when you hover over the chart and it highlights. Highcharts seems to be "auto-dimming" the color so that when you hover over it it highlights and displays the specific hex color you list when creating the chart.
Is there a way to set the actual color that appears? It'd be nice to just be able to specific which hex color should appear initially and which hex color displays when it's highlighted, rather than it auto-dimming the color and highlighting to the hex color you specify:
$('#ageChart').highcharts({
chart: {
marginRight: 50,
marginTop: 0,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '',
style: {
fontSize: 10
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
pie: {
size: 300,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Age Breakdown',
data: [
{
name: "14-17",
y: fourteenToSeventeen,
color: "#E0DBBA"
},
{
name: "18-24",
y: eighteenToTwentyFour,
color: "#8C8C8B"
},
{
name: "25-34",
y: twentyFiveToThirtyFour,
color: "#BEE7E8"
},
{
name: "35-44",
y: thirtyFiveToFourtyFour,
color: "#217C7E"
},
{
name: "45-54",
y: fourtyFiveToFiftyFour,
color: "#687D68"
},
{
name: "55+",
y: fiftyFivePlus,
color: "#634357"
}
]
}]
})
The colors are actually being displayed correctly. But on hover state, the colors get "brightened" by Highcharts.
This behavior can be turned off by specifying the brightness factor to 0 like so:
$('#container').highcharts({
..
..
series: [{
type: 'pie',
name: 'Age Breakdown',
//add this section
states: {
hover: {
brightness: 0
}
},
data: [
..
..
]
}]
})
Related
Is it possible to make the outliers color transition from light to dark? I am using box plot chart from Highcharts and want my outliers to render from light red to dark red. Any outliers above 100k needs to display in a darker red.
https://jsfiddle.net/samwhite/9amz3y7x/1/
Highcharts.chart('container', {
chart: {
type: 'boxplot',
zoomType: 'xy'
},
title: {
text: 'Boxplots for Buzz'
},
credits: {enabled: false},
legend: {
enabled: false
},
xAxis: {
categories: categories,
title: {
text: 'Stock Symbol'
}
},
yAxis: {
title: {
text: 'Buzz'
},
},
plotOptions: {
boxplot: {
fillColor: 'red',
// medianColor: '',
// stemColor: '',
// whiskerColor: ''
}
},
series: [{
name: 'Buzz',
data: box_dat,
color: 'red',
}, {
name: 'Outliers',
color: 'red',
type: 'scatter',
data: outliers,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: 'red'
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
You should use zones or color axis, but they only change point.color, which, in your case is replaced by marker.lineColor. Add the below plugin to allow changing line color by zones.
(function(H) {
H.wrap(H.Point.prototype, 'getZone', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.options.marker = {
lineColor: this.color
};
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/sc2hk1b9/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have two series of data in my highchart and want to use "minPointLength" for only one of them. Is this possible to set? My series contains only: name, color and data. My chartconfig looks like this:
const chartConfig = {
chart: {
type: 'column',
dashStyle: 'ShortDash',
},
title: {
text: '',
},
xAxis: {
padding: 0,
plotLines: [{
dashStyle: 'shortDash',
}],
},
yAxis: {
opposite: true,
title: {
text: '',
},
gridLineDashStyle: 'dash',
},
plotOptions: {
column: {
borderRadiusTopLeft: 32,
borderRadiusTopRight: 32,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
},
enableMouseTracking: false,
},
series: {
pointWidth: 24,
minPointLength: 3,
},
},
};
What I want is to always show minimum height on one of the datasets. Even if the scale goes from 1 to 1 000 000, it supposed to be a little peak at the bottom if one of my columns shows 3 out of 1 000 000.
Yes, you can set a minPointLength property individually for each series:
series: [{
minPointLength: 80,
data: [...]
}, {
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/19nc8jv6/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
I want to create barchart having custom horizontal lines added to show average benchmarks. Also there is labels added on these lines to show benchmark heading. I get line labels cut off as shown in following image.
Barchart
Also if plot line value is beyond the range plotted, plot line get hidden. How to handle this case in highchart? Following is the code that I am using.
$(function () {
$('#chartContainer').highcharts({
credits: {
enabled: false
},
colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'XYZ Average: 80%',
align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'PQR Average: 60%',
align: 'right'
}
}]
},
legend: {
enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: "s",
data: [70, 10, 40]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>
Set height for the chart and also the max value for Y-axis
chart: {
height: 600
},
yAxis: {
min: 0,
max: 100
}
I'd like to use a background image for each of my pie chart's slices. Is this possible in High Charts? I can't find an option to specify a background image for each slice. Here's a simple fiddle I put together: http://jsfiddle.net/3KyeL/ (just putting this here in case it makes life easier for someone who knows what to do):
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
title: {
align: 'center',
text: 'The Foo Bar',
style: {
color: '#9EA7B6'
},
verticalAlign: 'bottom',
y: 15 // TODO: compute this
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
distance: -100,
enabled: true,
color: '#FFFFFF',
format: '<strong>{point.name}</strong>: {point.percentage:.1f} %'
},
center: ['50%', '50%']
}
},
series: [{
data: [{
name: 'Foo',
y: 25
}, {
name: 'Bar',
y: 50
}, {
name: 'Foobar',
y: 25
}],
type: 'pie'
}]
});
});
Try to use pattern plugin: http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill
For example: http://jsfiddle.net/kVwGn/
<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script>
...
series: [{
type: 'pie',
data: [{
y: 35,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
width: 6,
height: 6
}
}, {
y: 15,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
}]
My code is as follows :
var options = {
chart: {
type: 'column',
events: {
click: $scope.goToPath(link)
}
},
title: {
text: ""
},
xAxis: {
categories: ['You', 'Average', 'Top Quartile'],
labels: {
style: {
fontSize: '14px',
color: 'grey'
}
}
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
column: {
colorByPoint: true,
dataLabels: {
enabled: true,
color: '#000000',
style: {
fontWeight: 'bold'
},
formatter: $scope.getBarValues()
}
}
},
series: [{
showInLegend: true,
name: 'Planning Sites',
data: metric1["chart_numbers"],
colors: ['#3399CC', '#CCCC33', '#686868']
}, {
showInLegend: true,
name: 'Build Out And Implementation',
data: metric2["chart_numbers"],
colors: ['#99CBE5', '#E4E599', '#BFBFBF']
}
]
}
Here, I want to customize the legend shown so that it does not use the colors specified in the colors array of each of the series element. How can I do that?
I want the legend as follows :
Black color - Planning
Grey color - Build Out
Here is the jsFiddle : http://jsfiddle.net/Kc55H/
For each series you can set also color, see: http://jsfiddle.net/Kc55H/1/