How would you achieve this (jsFiddle link)
dynamically for the Highcharts "Activity Gauge", so obviously it works there but I had to manually determine the correct x & y coordinates for the labels.
This result is similar to using the "inside" property for column charts, but seems nothing is built-in like that for this chart type (that I've run across at least). One could come close by passing in the same y values as for each series as tick marks on the y-axis (see snippet below) and getting rid of all markings except the number, but then I can't stagger those to be positioned correctly within each series, and for the dataLabel x & y approach I don't know the equation to be able to position the labels based on the series y values dynamically with a callback.
yAxis: {
labels: {
enabled: true,
x: 10, y: -15,
format: '{value} %',
style: {
fontSize: 16,
color: 'black'
}
},
min: 0,
max: 100,
gridLineColor: 'transparent',
lineColor: 'transparent',
minorTickLength: 0,
//tickInterval: 67,
tickPositions: [50, 65, 80], //TRIED TO USE Y-AXIS LABELS BUT COULDN'T STAGGER THEM
tickColor: '#000000',
tickPosition: 'inside',
//tickLength: 50,
tickWidth: 0
},
Any help would be much appreciated, thanks in advance.
Solved via Highcharts support forum:
fiddle
, just call the following function on chart load and redraw events:
function redrawConnectors() {
var chart = this,
cX, cY,
shapeArgs, ang, posX, posY, bBox;
Highcharts.each(chart.series, function(series, j) {
Highcharts.each(series.points, function(point, i) {
if (point.dataLabel) {
bBox = point.dataLabel.getBBox();
shapeArgs = point.shapeArgs;
cX = shapeArgs.x,
cY = shapeArgs.y,
ang = shapeArgs.end;
posX = cX + shapeArgs.r * Math.cos(ang);
posY = cY + shapeArgs.r * Math.sin(ang);
point.dataLabel.attr({
x: posX - bBox.width / 2,
y: posY - bBox.height / 2
});
}
});
});
}
Related
How you toggle the lines that are parallel to X axis and appear for each value on Y axis?
These ones -
xAxis: {
...
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
...
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
}
Just add this to the x axis definition
Its the yAxis.gridWidth - look the API Doc
Fiddle
Is there a way to add a plotband that has a smooth transition? Before I am using
addPlotLine and
addPlotBand
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].removePlotLine('plot-line-1');
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
chart.yAxis[0].addPlotBand({
from: 100000,
to: y,
color: {
linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
stops: [
[0, 'rgba(46, 230, 0, 0.22)'],
[1, 'rgba(46, 230, 0, 0)'] //down
]
},
id: 'plot-band-1'
});
chart.yAxis[0].addPlotLine({
value: y,
color: 'red',
width: 2,
id: 'plot-line-1'
});
to plot the point on a dynamic chart, but now I am using animate to make the plotting smoother
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotLine.animate({
translateY: newY
}, 300);
Also I am trying the solution from this Highcharts plotBand animation. however it seems that I am unable to implement it properly.
For your reference here is the code of where is used addPlotLine and addPlotBand and this is the current code style being used. Appreciate your help with this. Thank you.
If you pass path d attribute as an array, you can animate it as a simple shape.
Add the plotband before setiInterval and animate it as the plotline on every interval.
const plotbandPath = plotband.svgElem.d.split(' ')
plotbandPath[7] = plotbandPath[9] = newY
plotband.svgElem.animate({
d: plotbandPath
}, 300)
example: http://jsfiddle.net/sqer2x13/
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/
As you can see in the picture each column is accompanied by its datalabels, all is well. The detail is when small amounts and their datalabels is misconfigured with the categories, as seen in the picture (Red square). What I want to do is check if your height is less, to change its rotation from -90 to 0 (Green letters)
See picture of the solution (HighCharts) here:
https://docs.google.com/file/d/0B93NeaQX1VjUMldzcGIxNnBqaWc/edit
See code JSFiddle of my solution (HighCharts) here :
http://jsfiddle.net/bryan376/325dev4h/1/
This is my code push of series:
options.series.push({
name: 'Vendedor',
data: arrFinal,
dataLabels: {
enabled: true,
rotation: -90, //Validation height < 70 "rotation=0" else rotation=-90
color: 'black',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
});
var chart = new Highcharts.Chart(options);
}
Greetings
You can change Highcharts.Series.prototype.drawDataLabels, the function to draw the dataLabels:
Highcharts.Series.prototype.drawDataLabels = (function (func) {
return function () {
func.apply(this, arguments);
if (this.options.dataLabels.enabled || this._hasPointLabels) realignLabels(this);
};
}(Highcharts.Series.prototype.drawDataLabels));
realignLabels would be the function to check for the shorter columns, and in it change the rotation, x and y of that specific dataLabel:
function realignLabels(serie) {
$.each(serie.points, function (j, point) {
if (!point.dataLabel) return true;
var max = serie.yAxis.max,
labely = point.dataLabel.attr('y'),
labelx = point.dataLabel.attr('x');
if (point.y / max < 0.05) {
point.dataLabel.attr({
y: labely - 20,
x: labelx + 5,
rotation: 0
});
}
});
};
http://jsfiddle.net/325dev4h/7
I am using highcharts and I want to change the color of bar depending on their Y axis values.
Something like:
{
color: '#92D050', //DEFAULT COLOR OF CURRENT YEAR BAR ON EACH GROUP
name: 'AUG',
shadow: false,
data: [
{ y: 66, color: '#92D050' },
{ y: 55, color: 'red' },
{ y: 78, color: '#92D050' },
{ y: 55, color: 'red'}
]
}
Here how can I apply codition like y: > 60
You can iterate for each element and modify SVG parameter like fill.
http://jsfiddle.net/CaPG9/
var max = 200;
$.each(chart.series[0].data,function(i,data){
if(data.y > max)
data.graphic.attr({
fill:'red'
});
});
It doesn't work, cause if you put the mouse over the columns, the color reset for the original.
I solved with this code, using a variable that counts how many columns I want to color. In my case, j is set before to 6.
var j = 6;
$.each(chart.series[0].data, function(i,data){
for (var n = 0; n <= j; n++) {
chart.series[0].data[n].update({color:'#441606'});
}
});