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
Related
I change the color and radius of my spline's marker as soon as it crosses a certain value by using point.update however now I am aggregating the data using dataGrouping and I have lost that ability. How can I color the aggregated data point?
Currently it is not possible to update grouped points. Please check a thread in this github isssue: https://github.com/highcharts/highcharts/issues/5147
However, you can use attr method directly on SVG point elements:
chart: {
events: {
load: function() {
var points = this.series[0].groupedData;
points.forEach(function(point) {
if (point.y > 30) {
point.graphic.attr({
width: 8,
height: 8,
fill: 'red',
translateX: -2
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/58afeL47/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
In Highcharts, there is a possibility to shift the y-Axis labels into the plot-area with
yAxis: {
labels: {
align: 'left',
x: 0,
y: -2
}
}
With this setting, the labels are covered by the lines, data-labels and so on.
Is it possible to draw the horizontal grid lines across the yAxis-Label-Area without making the xAxis and the series start there. The wished behavior is indicated with the black lines in the image below.
The simplest solution is to adjust the xAxis, for example:
xAxis: {
min: -0.5
}
Live demo: http://jsfiddle.net/BlackLabel/qnayxb04/
API: https://api.highcharts.com/highcharts/xAxis.min
If you want to have more control over the lines, you can use setAttribute to edit the path element:
chart: {
events: {
load: function() {
var gridLines = this.yAxis[0].gridGroup.element.children,
i,
path;
for (i = 0; i < gridLines.length; i++) {
path = gridLines[i].attributes.d.nodeValue;
path = 'M 40' + path.substr(4);
gridLines[i].setAttribute('d', path)
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/61h5qtn9/1/
I have created a graph using highcharts which has 6 series. 3 are column series and 3 are spline series.spline series will collide or go within the column chart so having a requirement to add outline to spline series to have better viewing. Trying to add a border color for the spline series but unable to do. But the same is possible in column chart.If anyone have tried this before for spline series kindly help.
plotOptions: {
series: {
borderColor: '#303030'
}
},
this bordercolor is working for column but not in spline series
column chart
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-bordercolor/
would like to have border for the below series
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-box/
There is no such feature in Highcharts to set line border, but all is not lost.
You can achieve the effect you want, by adding new "fake" series basing on every line series, and set a couple of parameters.
Best place (in code) to do that would be the chart.events.load function, so there just find all series with line type:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
}
}
}
Then, iterate on all the series found, and create new one so that it would have color: [color_you_want], the same data and marker.symbol, increased lineWidth as well as marker.radius, won't be accessible by mouse and not visible in legend, just like below:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
series.forEach(series => {
this.addSeries({
data: series.userOptions.data,
showInLegend: false,
color: '#000',
enableMouseTracking: false,
zIndex: -9999,
marker: {
symbol: series.symbol,
radius: series.options.marker.radius + 1
},
lineWidth: series.options.lineWidth + 2
})
})
}
}
}
Hope, it helps you.
Live example: http://jsfiddle.net/yw2tb4nm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.marker.symbol
https://api.highcharts.com/highcharts/series.line.marker.radius
https://api.highcharts.com/highcharts/series.line.showInLegend
https://api.highcharts.com/highcharts/series.line.enableMouseTracking
I'm a R programmer trying to parse some JS code though highcharter package.
I'm trying to change each bar color on hover with this example based on this question.
I've tried this:
plotOptions: {
column: {
events: {
mouseOver: function () {
this.chart.series[this.index].update({
color: 'blue'
});
},
mouseOut: function () {
this.chart.series[this.index].update({
color: '#b0b0b0'
});
}
};
states: {
hover: {
color: colors[x]
}
}
}
}
However I can only highlight with the 'blue' color. How can I use a different color for a different column?
Thank you.
You see only the blue color on all columns, because you set those events on series.
In order to achieve it, you can create arrays with colors and assign it to general chart object on chart.events.load. Then in series.point.events.mouseOver and mouseOut should be able to change the color by point index. Here is the example code:
highchart() %>%
hc_chart(events = list(
load = JS("function() {this.customColors = ['red', 'green', 'blue']}")
)) %>%
hc_series(
list(
data = abs(rnorm(3)) + 1,
type = "column",
color = '#ddd',
point = list(
events = list(
mouseOver = JS("function() {this.update({color: this.series.chart.customColors[this.index]})}"),
mouseOut = JS("function() {this.update({color: '#ddd'})}")
)
)
)
)
API Reference:
https://api.highcharts.com/highcharts/series.column.point.events
https://api.highcharts.com/highcharts/chart.events.load
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/