I want to crop label inside the box of data in x-range chart when it overflows. How can I do it?
Code of the point:
{
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2,
dataLabels:[{
format: '54687687',
crop: true
}]
}
Example in jsfiddle: https://jsfiddle.net/levra/kmefL0tr/1/
This behavior is not supported by default in Highcharts, but in the afterDrawDataLabels event, by using css method, you can set textOverflow: 'ellipsis' and the right width styles:
var H = Highcharts;
H.addEvent(H.Series, 'afterDrawDataLabels', function() {
var movement;
this.points.forEach(function(p) {
if (p.shapeArgs.width < p.dataLabels[0].width) {
movement = (p.dataLabels[0].width - p.shapeArgs.width) / 2;
p.dataLabels[0].css({
width: p.shapeArgs.width,
textOverflow: 'ellipsis'
});
p.dataLabels[0].text.attr({
x: movement
});
}
});
});
Live demo: https://jsfiddle.net/BlackLabel/h3fwxjb7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
Related
I am trying to create a chart somehow similar to expertoptions' by using Highcharts, however I can't find solution to adding a custom marker to the line, I have tried doing something like:
var myCircle = myChart.renderer.circle(x,y,20).attr({
fill: '#d3d7de'
}).add(circlePointGroup);
var circlePointGroup = myChart.xAxis[0].renderer.g().attr({
translateX: 2000,
translateY: 2000
}).add();
but ended up being a floating static shape, I have here the fiddle, Any help would be appreciated. I have hard time reading their documentation :/
I think that a better approach might be adding this point as a scatter series - that keeps the point in the move while adding new points to the main series. Using renderer.circle renders circle in a static position.
Demo: https://jsfiddle.net/BlackLabel/Lpfj4stx/
var betWindowInterval = setInterval(function() {
myChart.xAxis[0].removePlotLine('markerLineX');
myChart.yAxis[0].removePlotLine('markerLineY');
myChart.series.forEach(s => {
if (s.options.id === 'customPoint') {
s.remove();
}
})
clearInterval(betWindowInterval)
}, 2000);
myChart.addSeries({
type: 'scatter',
data: [{x: lastPointY.x, y: lastPointY.y}],
id: 'customPoint',
marker: {
fillColor: 'red',
radius: 5,
symbol: 'circle'
}
})
API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
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
Is there a way to have a point specific positionning of the xAxis labels ?
I am using a waterfall chart and for some bars I would like the label to appear directly under the bar like below :
I have found the following code in the xAxis plotOptions but at this point I don't see how I can acces the info on the bottom of the chart.
xAxis: {
labels: {
y:-100 //label's y position
}
},
You can use point dataLabels to achieve such result:
dataLabels: {
crop: false,
overflow: 'none',
verticalAlign: 'bottom',
format: 'label1',
y: 20
}
Live demo: https://jsfiddle.net/BlackLabel/71jtp5mf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.dataLabels
Another way is to create your own custom function to position the xAxis labels, for example:
events: {
load: function() {
var chart = this,
point;
Highcharts.objectEach(chart.xAxis[0].ticks, function(tick) {
if (!tick.isNewLabel) {
point = chart.series[0].points[tick.pos];
tick.label.attr({
y: point.plotY + chart.plotTop + point.shapeArgs.height + 15
})
}
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/oaj9bgt4/
is there a way to change color of the plotline label when the movement goes up and change it again in different font color when movement goes down?
yAxis.addPlotLine({
value: 66,
color: 'red',
width: 2,
id: 'plot-line-1',
label: {
text: 66,
align: 'right',
style: {
color: 'red',
fontWeight: 'bold'
},
y: newY,
x: 0
}
});
Here is a working file http://jsfiddle.net/kttfv1h3/9/
thanks for the help
You can add css style options to your plotLabel like to a simple object; docs
var prev_val = 0; // global
plotlabel = yAxis.plotLinesAndBands[0].label;
if(prev_val <= y) {
plotlabel.css({'color':'blue'});
} else {
plotlabel.css({'color':'green'});
}
prev_val = y;
My jsFiddle: http://jsfiddle.net/kttfv1h3/12/
After playing around a bit with the different settings I found a way to achieve what you are seeking.
By delcaring a new variable oldY
And doing the following in setInterval, the label color changes depending on if the value is increasing or decreasing:
if(y < oldY) {
yAxis.plotLinesAndBands["0"].label.element.style.fill = 'red';
} else {
yAxis.plotLinesAndBands["0"].label.element.style.fill = 'green';
}
oldY = y;
See jsfiddle for a working example based on the one you supplied.
I have created a chart where I've added an image.
Now when I click this image I want to set the yAxis max to a specific point, and when I click it again to reset the yAxis to the original values.
This is the jsfiddle for it: http://jsfiddle.net/inadcod/TynwP/
I have managed to add the image, to add a click event to the image, but it's as far as I got.
Can anyone help me out with this? Thanks!
There are two ways to do what you want.
First way:
The problem is that it's not possible to update chart options and then redraw to get it updated, you have to destroy and then create it again like the following.
So, for this you can store your chart options into a var and then pass as parameter.
// inside options
load: function() {
this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
.on('click', function() {
if(options.yAxis.max) {
delete options.yAxis.max; // return to default
} else {
options.yAxis.max = 25;
}
chart = new Highcharts.Chart(options);
})
.css({
cursor: 'pointer',
position: 'relative',
"margin-left": "-90px",
opacity: 0.75
}).attr({
id: 'myImage',
zIndex: -100
}).add();
}
Demo
Second way:
redraw isn't called if you just update axis data like the following.
chart.yAxis[0].max = 25;, that's why I suggested the way above.
But if you set chart.yAxis[0].isDisty = true; and call chart.redraw();, it will work. You can see my demo bellow.
// inside chart options
load: function() {
this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
.on('click', function() {
var axis = chart.yAxis[0];
axis.max = 25;
axis.isDirty = true;
chart.redraw();
})
.css({
cursor: 'pointer',
position: 'relative',
"margin-left": "-90px",
opacity: 0.75
}).attr({
id: 'myImage', // your image id
zIndex: -100
}).add();
}
Demo