If I modify the symbol Width/Height in a bar-chart the symbol is "bottom" aligned with the legend text. Is there a way to "middle - align" them?
http://jsfiddle.net/klodoma/h8j0kL1e/
legend: {
...
symbolHeight: 5,
symbolWidth: 5,
symbolRadius: 0,
...
},
You can calculate and set translateY attribute for legend symbol SVG elements:
events: {
load: function() {
var legendItems = this.legend.allItems,
textBbox,
symbolBbox;
legendItems.forEach(function(item) {
textBbox = item.legendItem.getBBox();
symbolBbox = item.legendSymbol.getBBox();
item.legendSymbol.attr({
translateY: symbolBbox.height - textBbox.height / 2
});
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/a0ye5tuw/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
The only way I know is to use CSS "it's dirty but it works"
.highcharts-point{
transform: translate(0, -10px)
}
Fiddle
http://jsfiddle.net/klodoma/p5mdy19u/
Based on the answer from #ppotaczek I've aligned the Y so that it's always middle aligned, no matter what the symbol size is.
events: {
load: function() {
var legendItems = this.legend.allItems,
textBbox,
symbolBbox;
legendItems.forEach(function(item) {
textBbox = item.legendItem.getBBox();
symbolBbox = item.legendSymbol.getBBox();
item.legendSymbol.attr({
y: textBbox.y + (textBbox.height - symbolBbox.height) / 2
});
});
}
}
Related
I want to align Highcharts PlotLine Label with the line (not top or bottom). Is it possible?
Thank!
I think that the easiest way to achieve it is by rendering the plotLine and adding the custom label on it to cover part of the line.
Demo: https://jsfiddle.net/BlackLabel/b50k6hov/
Code:
chart: {
events: {
render() {
let chart = this,
plotLineCor = chart.yAxis[0].plotLinesAndBands[0].svgElem.d.split(' '),
x = plotLineCor[1],
y = plotLineCor[2];
if (!chart.label) {
// render label in init position
chart.label = chart.renderer.label('TEXT', 0, 0)
.css({
color: 'red'
})
.attr({
fill: 'white',
padding: 12,
zIndex: 6
})
.add();
}
// translate label after reach resize
chart.label.translate(x, y - chart.label.getBBox().height / 2)
}
}
},
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API: https://api.highcharts.com/highcharts/chart.events.render
I have a chart with some indicators below it. Each indicator area consists
of a svg renderer button. so when I use resize property to drag and resize
the panes, the series resized perfectly but the button remains in its same
position, Can we move the button with the resizer?
Here I created a sample link to regenerate
https://jsfiddle.net/q0ybpnvx/2/
Any help will be appreciated. I am having great trouble. Thank you
You can add and position the custom button in render event:
chart: {
events: {
render: function() {
var chart = this;
if (chart.customBtn) {
chart.customBtn.attr({
y: chart.yAxis[1].top,
});
} else {
chart.customBtn = chart.renderer.button(
'sometext',
5,
chart.yAxis[1].top,
function() {
console.log('some task')
}).add()
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/b7vq4ecy/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I was able to do something by manually changing the x/y attributes of my svgRenderer label, the same should apply to buttons.
I'm in angular and have a listener for screen resizing:
Also Note that you can change the entire SVGRenderer label with the attr.text property.
this.chart = Highcharts.chart(.....);
// I used a helper method to create the label
this.chart.myLabel = this.labelCreationHelperMethod(this.chart, data);
this.windowEventService.resize$.subscribe(dimensions => {
if(dimensions.x < 500) { //this would be your charts resize breakpoint
// here I was using a specific chart series property to tell where to put my x coordinate,
// you can traverse through the chart object to find a similar number,
// or just use a hardcoded number
this.chart.myLabel.attr({ y: 15, x: this.chart.series[0].points[0].plotX + 20 });
} else {
this.chart.myLabel.attr({ y: 100, x: this.chart.series[0].points[0].plotX + 50 });
}
}
//Returns the label object that we keep a reference to in the chart object.
labelCreationHelperMethod() {
const y = screen.width > 500 ? 100 : 15;
const x = screen.width > 500 ? this.chart.series[0].points[0].plotX + 50 :
this.chart.series[0].points[0].plotX + 20
// your label
const label = `<div style="color: blue"...> My Label Stuff</div>`
return chart.renderer.label(label, x, y, 'callout', offset + chart.plotLeft, chart.plotTop + 80, true)
.attr({
fill: '#e8e8e8',
padding: 15,
r: 5,
zIndex: 6
})
.add();
}
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/
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 show plotlines even when the associated axis has visible: false? Is seems that hiding the axis also hides the plotlines.
More details...
I'm drawing a diagram of a day, like this:
I simply want to add a vertical line at certain times, line the "Now" time, etc.
If I do that using a plot line, then the axis shows up too:
I definitely do not want the axis to show.
My plan now is to draw my own line on the chart using render.rect or render.path. Is there another option?
I found a relatively trivial solution... just hide it with css:
.highcharts-xaxis {
display: none;
}
and in js:
xAxis: {
type: 'datetime',
labels:{
enabled: false
}
}
You can extend Highcharts by wrapping the method responsible for redrawing an axis.
Highcharts.wrap(Highcharts.Axis.prototype, 'redraw', function(p) {
p.call(this);
console.log(this);
var axis = this,
each = Highcharts.each,
options = this.options;
// move plot lines and bands
if (!axis._addedPlotLB) { // only first time
each((options.plotLines || []), function(plotLineOptions) {
axis.addPlotBandOrLine(plotLineOptions);
});
axis._addedPlotLB = true;
}
each(this.plotLinesAndBands, function(plotLine) {
plotLine.render();
});
});
example: http://jsfiddle.net/ncs81btt/
The solution above is not very elegant, though. Much better ways to do it is using Renderer or hide particular axis elements (labels, ticks, etc.).
Depending on what you need from plot lines functionality, using renderer requires to do some calculations.
var customPlotLines = [{
value: 5,
color: 'red',
width: 3
}, {
value: 10,
color: 'yellow',
width: 3
}]
function renderPlotLines() {
var axis = this.xAxis[0],
top = axis.chart.plotTop,
bottom = top + axis.chart.plotHeight,
path = [
'M', null, top,
'L', null, bottom
];
if (!this.customPlotLines) {
this.customPlotLines = customPlotLines.map(plotLine => {
return this.renderer.path([]).add();
});
}
this.customPlotLines.forEach((plotLine, i) => {
var opt = customPlotLines[i];
path[4] = path[1] = axis.toPixels(opt.value);
plotLine.attr({
d: path.join(' '),
'stroke-width': opt.width,
stroke: opt.color
});
});
}
Hook into load/redraw event, so the elements will resize.
chart: {
zoomType: 'xy',
events: {
load: renderPlotLines,
redraw: renderPlotLines
}
},
example: http://jsfiddle.net/ncs81btt/1/