Round Corners in RadialBar Highcharts - highcharts

i want to add round corners to radial bar using highcharts is there a way i can do it?
I was able to add round corners to simple column chart using 'borderRadius'. Here is an example
https://jsfiddle.net/agbvnm91/1/.
column: {
stacking: 'normal',
borderWidth: 0,
pointPadding: 0,
groupPadding: 0.01,
pointWidth: 10,
borderRadius: 10
}
But it's not working for radial bar. Here is example of what I tried https://jsfiddle.net/agbvnm91/1/.

Related

Is there a way to configure columns in highchart to have zero pointPadding AND a maxPointWidth?

I'm creating a column chart that has two series (Income and Expenses) in Highcharts. I would like to have no padding between each column and I would like to be able to set the maxPointWidth to a value.
I already tried setting the maxPointWidth to a value and setting the pointPadding to zero. But when I do that the columns have extra padding between each of the series.
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
maxPointWidth: 32
}
}
I expected the columns to be adjacent to each other but instead the columns had even more space but the maxPointWidth did restrict the thickness of the columns to 32.
You can try to set also the groupPadding = 0 and borderWidth = 0:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
maxPointWidth: 32,
groupPadding: 0
}
}
Note, that columns are equally spaced on the chart plot area and when you set fixed columns width then space between them has to be adjusted.
Demo:
https://jsfiddle.net/BlackLabel/5f614cjz/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.borderWidth

Label position between series in Highcharts polar chart

I'm trying to position custom labels on the outside of a polar chart but can't figure out any way to do it. Please image below for what I'm trying to achieve.
Doesn't have to use the actual series labels but haven't found anything else that can be positioned relative to the actual chart (top level labels can be positioned anywhere but only using absolute left and top).
Have also tried changing the pointPlacement and tickmarkPlacement to "between" which sort of works but it rotates the actual chart so I get a diamond shape instead of a square, the effect I'm after would be more like rotating the labels and leaving the ticks in place.
IN such case custom labels can be positioned relative to grid line group.
Method for drawing the labels:
function drawLabels () {
let labels = this.customLabels,
bbox = this.xAxis[0].gridGroup.getBBox(),
positions = [
[bbox.x + bbox.width / 2, bbox.y],
[bbox.x + bbox.width, bbox.y + bbox.height / 2],
[bbox.x + bbox.width / 2, bbox.y + bbox.height],
[bbox.x, bbox.y + bbox.height / 2]
];
if (!labels) {
labels = this.customLabels = ['lab1', 'lab2', 'lab3', 'lab4'].map(text => this.renderer.label(text, 0, -9999).add().attr({zIndex: 4}));
}
labels.forEach((label, i) => {
label.align({
align: 'center',
verticalAlign: 'middle',
width: label.width,
height: label.height
}, null, {
x: positions[i][0],
y: positions[i][1],
width: 0,
height: 0
});
});
}
Draw labels on load/redraw:
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line',
events: {
load: drawLabels,
redraw: drawLabels
}
},
example: http://jsfiddle.net/d6y1bn31/

Highcharts heatmap scale one decimal place

I am using Highcharts heatmap and would like to display one decimal place on the scale range. See image below. I would like to show 0.0, -5.0, -10.0, -15.0, -20.0.
I have increased the range of scale by adding "symbolHeight" to legend. See below code:
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 42,
symbolHeight: 360
}
You can format the Y-Axis decimals with using yAxis.labels.format.
For 0.0, -5.0, -10.0, -15.0, -20.0 ticks, you need to use minTickInterval
Just add this code;
yAxis: {
labels: {
format: '{value:.1f}'
},
minTickInterval: 5
}
Example: jsFiddle
I was able to display the decimal points by adding
labels: {
format: '{value:.1f}'
}
to colorAxis. See edited fiddle: https://jsfiddle.net/er1187/u7oax1ue/1/

Highcharts Heatmap colorAxis min 0 Max 1

I have some values between 0 and 1 that I want to show in a heatmap graphic in highcharts.
The gradient bar should be between 0 and 1, but it is bigger and when I select a cell in the graphic, the color does not match with the color in the gradient bar.
colorAxis: {
min: 0,
max: 1,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
tickPositions: [0, 0.5, 1]
}
http://jsfiddle.net/n13vuaja/
For values between 0 and 150 it works: http://jsfiddle.net/2p2bunnm/
but with values between 0 and 1, even adding the min: 0, max:1, does not match the cursor in the gradient bar with the color.
any idea how to make the gradient bar cursor select the proper color between 0 and 1?
Thanks!
This is a known bug with heatmaps. Currently the workaround seems to be removing the line
this.isXAxis = true;
in the colorAxis init function of the heatmap module (line 93 in heatmap.src.js).
I think it's a bug in highcharts. Their demo if scaled down to small value doesn't match the colorAxis correctly to the legend color (http://jsfiddle.net/3188gubh/).
E.g. 0 is not completely white on the legend, but is on the chart.
Without a code block stackoverflow doesn't let me post a link to jsfiddle :(

highcharts legend position wrong when align ='left' or 'right'?

my jsfiddle sample is here. The vertical align is bottom. When I set align = 'center', the legend is underneath the charting area. However, if I set align='left' or 'right', the legend will occupy the charting area's space and make the area really small.
I want the legend at bottom left of the charting area, is it possible?
http://jsfiddle.net/daxu/xeb3n/585/
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
y: 0,
padding: 0,
margin:5,
itemMarginTop: 0,
itemMarginBottom: 0,
itemStyle:{
fontSize: '10px'
}
},
You can set floating: true, and then adjust x and y to get to the position that you want.
Documentation
Instead of floating the position, you can use x when align: 'center'. In that case, the legend will be offset from the naturally aligned position. Of course, you'll need to determine the offset to works best for your chart. Negative x values will move the legend towards the left, see example image.

Resources