I am using Highcharts 4.0.
This is what I get with the default parameters.
I want to customize it while I can't find the docs.
This is what I expect:
The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
The value number can be displayed
The unwanted scale-number (0, 2.5, 5) can be hidden
All these options are described in the Highcharts-API-Doc: http://api.highcharts.com/highcharts
1) The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
This is tricky. You can either try to add a plotBand to the yAxis, but you need to know the max Value, otherwise it will leave a white gap. All the other options (set a background color to the pane or chart.plotBackgroundColor options do not take the shape of the polar chart into account.
yAxis: {
plotBands: {
from:0,
to: 75000,
color: '#0c0'
}
}
2) The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
set the type of the series to 'area', you can then style it either directly in the series or via the plotOptions.series-Object
series: [{
name: 'Whatever',
type: 'area',
data: [...]
}]
[...]
plotOptions: {
area: {
fillOpacity: 0.9
}
}
3) The value number can be displayed
for areas, set the dataLabels.enabled property to true
plotOptions: {
area: {
dataLabels: {
enabled: true
}
}
}
4) The unwanted scale-number (0, 2.5, 5) can be hidden
set the labels.enabled property of the yAxis to false
yAxis: {
labels: {
enabled: false
}
}
Fiddle http://jsfiddle.net/doc_snyder/qnqux036/
Related
This is the link to the fiddle
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/box-plot-styling/
Below are the plotOptions.
plotOptions: {
boxplot: {
boxDashStyle: 'Dash',
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianDashStyle: 'ShortDot',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'dot',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
}
This boxplot shows high and low values in green color. In my case I need to change the high value(Q1) color in red and low value color in green.
How can I do this.?
Thank you
Currently it's not possible in Highcharts by default - related github issue: https://github.com/highcharts/highcharts/issues/6796
Currently each box is a single SVG shape and a border is applied by
stroke parameter which cannot be "separated" for smaller edges. As a
result, you can apply only single color.
Your goal requires a rebuild core of boxplot, so we cannot threat it as a bug, but feature request.
As a workaround you can render custom paths to cover one of the existing whiskers, for example:
events: {
render: function() {
var series = this.series[0],
attr,
paths;
series.points.forEach(function(point) {
paths = point.whiskers.d.split('M');
attr = {
d: 'M' + paths[1],
'stroke-width': 2,
stroke: 'red'
};
if (point.customHigh) {
point.customHigh.attr(attr);
} else {
point.customHigh = this.renderer
.path()
.attr(attr)
.add(series.group);
}
}, this);
}
}
Live demo: https://jsfiddle.net/BlackLabel/vcefbk46/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
Is there any way to change the legend with filled color same as series, But having circle marker filled with white color on the series fiddle: https://jsfiddle.net/Lur5tw76/13/, Here the legend and series markers are filled with white color at center, Is there any option not to change legend as marker( legend filled with series color), here is my series option for highcharts
series: [{
data: data,
color: "#405caa",
stickyTracking: false,
marker: {
enabled: true,
radius: 6,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null // The series' or point's color is used when null.
},
dataGrouping: {
forced: true,
approximation: "sum",
units: units
}
}]
In order for the legend item to have a different fill than the series you could wrap the processing of Legend.colorizeItem to alter it prior to being colored.
For example (JSFiddle):
(function (H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
// Store series fill color
let old_option = item.options.marker.fillColor
// Store series line color
let new_option = item.options.marker.lineColor
// Overwrite series fill color with line color
item.options.marker.fillColor = new_option
// Do colorizeItem with new fill color
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
// Set series fill color back to original value
item.options.marker.fillColor = old_option
});
}(Highcharts));
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
Is there a way to add a second needle of a different colour to a VU Meter ('gauge') style chart in Highcharts? I know that you can change the colour of the needle per chart using plotOptions:gauge:dial e.g.
plotOptions: {
gauge: {
dial: {
radius: '100%',
backgroundColor : 'grey'
}
}
}
and I have tried to overlay a second pane and specify individual plotOptions (as per this fiddle (http://jsfiddle.net/jdalton/xfV5k/8/) but without any success
You can use the same options as in plotOptions directly in series:
series: [{
data: [{y:-6, color: 'red'}],
yAxis: 0,
dial: {
backgroundColor : 'red'
}
}
Example: http://jsfiddle.net/xfV5k/11/