Highchart Rectangle Border Radius - highcharts

I have an highchart rectangle on a chart. Is it possible to set only the borders on the right to have radius and sharp corners for the left?
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect/
I have tried to set the borderRadius (hyphenated) in .CSS as well, but that didn't work too.
renderer.rect(100, 100, 100, 100, 0)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.css({
borderRadius:'10px'
})
.add();
Thanks!

It seems this isn't possibly (easily) as highcharts will render it as SVG element which can't be altered preferentially. Thanks Pawel Fus.

Related

How to make a text appear from 0 to 100% (fold out effect) in KonvaJs

In KonvaJS how to make a text appear from 0 to 100% (fold out effect)
i want to create same effect as in below video, but with text
https://www.youtube.com/watch?v=HO6mco2MGH0
i tried giving width 0 to the node and then increased the width to 100% in the tween. But it is not giving me the desired effect. Text is appear character by character.
TIA
For that case, you can use group clipping.
const group = new Konva.Group({
clipX: 100,
clipY: 0,
clipWidth: 100,
clipHeight: 100
});
layer.add(group);
const circle = new Konva.Circle({
x: 0,
y: 50,
radius: 50,
fill: 'green'
});
group.add(circle);
circle.to({
x: 150,
duration: 1
});
Demo: http://jsbin.com/miketotuvo/1/edit?html,js,output

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/

set opacity with color literal in openlayers style

In openLayers 3 I take some features in GeoJSON format and create a style for them.
The features have a value of "income" that has values like "red", "blue", "green" etc etc.
So I want to add alpha to the color of the features, but because the color is a word and not RGB I cannot.
I do
var color = feature.get('income');
fill: new ol.style.Fill({
color: [color, 0.75]
})
and all the features are black.
Who do I fix this?
Thanks
Update
Suppose I change the value of every "income" attribute from a word to an RGB so now is not "blue", but "0,0,127" and then I try to compose a string
var color = feature.get('income');
var colorfinal = '[' + color + ',0.3]';
var fill = new ol.style.Fill({
color: colorfinal
});
and still all features are black. Well, beats me.
add rgba in you string and remove bruckets. check it here
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.8)',
lineDash: [10, 10],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.5)'
})
})

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