Center title of chart relative to the plot background - highcharts

I would like to center the title of a pie chart relative to the plot background (not the element containing the chart), so that if there is a legend next to the char the title is still centered relative to the pie.
Using
title: {
text: 'Title',
align: 'center'
}
centers the title relative to the containing element.
See this fiddle for the full example.
Is it possible somehow?

You can position the title in the render event, for example:
chart: {
...,
events: {
render: function() {
var seriesGroupBBox = this.seriesGroup.getBBox();
this.title.attr({
x: seriesGroupBBox.x + seriesGroupBBox.width / 2 - this.title.getBBox().width / 2
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/6a9sroe7/
API Reference: https://api.highcharts.com/highcharts/chart.events.render

Related

Can we add fixed buttons on top of bars in highcharts bar chart

Hi we want to explore a feature, where we can add html buttons on top of bars in highcharts bar chart
Highcharts Bar Chart Buttons
You can add the buttons after chart creation process by using Highcharts.SVGRenderer class.
events: {
load: function() {
const chart = this;
chart.series[0].points.forEach(function(point) {
chart.renderer.button(
'Hold',
point.plotX + chart.plotLeft,
point.plotY
)
.attr({
align: 'center'
})
.add();
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/u42h13eb/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

Higcharts - marginBottom does not let rendering xAxis series ellipsis

The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/

Highcharts Bar - Display DataLabel at the right end of the plot

I need the dataLabels to be always displayed at the right end of bar chart irrespective of the data value. According to the Highcharts API, the dataLabel position is adjustable only relative of its current position. Is there a way to change the datalabel position relative to the chart area?
You're looking for something like this?
If you make the labels HTML elements instead of SVG elements..
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true,
//Labels are easier to move around if we switch from SVG to HTML:
useHTML: true,
}
}
}
..it's quite easy to move them around using CSS:
.highcharts-data-labels.highcharts-bar-series {
/* Stretch the labels container across the whole chart area: */
right: 0;
}
.highcharts-label.highcharts-data-label,
.highcharts-label.highcharts-data-label span {
/* Disable the default label placement.. */
left: auto !important;
/* ..and put them along the right side of the container */
right: 8px;
}
https://jsfiddle.net/ncbedru8/
You can also position data labels in the render event:
events: {
render: function() {
var chart = this;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.dataLabel) {
p.dataLabel.attr({
x: chart.plotWidth - p.dataLabel.width
});
}
});
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/yt1joqLr/1/
API Reference: https://api.highcharts.com/highcharts/chart.events

Highstock, split tooltip and opposite xAxis?

I'm displaying the x-axis of my Highstock chart at the top of the chart area with xAxis: { opposite: true}.
However the tooltip continues to show the x-axis value at the bottom of the chart, see for example here http://jsfiddle.net/ckj7kf2y/
Is there any way I can change the positioning of this be at the top, close to the x-axis?
Bonus points if someone knows why the tooltip.positioner callback isn't called when tooltip: { split: true }
It's possible to wrap core code to add this feature like in this demo: http://jsfiddle.net/ygmbwxtx/
(function(H){
H.wrap(H.Tooltip.prototype, 'renderSplit', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
var tooltip = this,
topAxis = tooltip.options.topAxis,
axisTT = tooltip.tt,
top = tooltip.chart.plotTop;
if (topAxis) {
axisTT.attr({
y: top - axisTT.height,
anchorY: top + 10
});
}
});
}(Highcharts))
and in chart's options:
...
tooltip: {
split: true,
topAxis: true
...
Bonus: positioner is not used for split tooltip - split uses own logic for positioning

Highchart pie - datalabel cannot be selected when setting useHTML=true

when i set useHTML=true on pie datalabels the labels are not respond to mouse hover and not show tooltip
http://jsfiddle.net/wh4mw0o7/
$(function () {
$('#container').highcharts({
chart: {},
plotOptions: {
pie: {
dataLabels: {
useHTML:true, // <- THE PROBLEM !!!!!
}
}
},
series: [{
type: 'pie',
data: [
['AAA', 10],
['BBB', 20],
['CCC', 15]
]
}]
});
});
do some one know how to fix it ?
i use html in the labels(different sizing and colors so i must use html as label).
See the http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
and paragraph "The downsides are that it will always be laid out on top of all other SVG content, and that it is not rendered the same way in exported charts." It means that HTML elements are below SVG, which keeps events.
Related topic: https://github.com/highslide-software/highcharts.com/issues/2158
EDIT:
$.each(chart.series[0].data, function (i, d) {
$('.highcharts-data-labels div span').eq(i).mouseover(function (e) {
chart.tooltip.refresh(d);
});
});
Workaround: http://jsfiddle.net/wh4mw0o7/6/
As a solution you can call the covering of each part of your pie chart.
dataLabels: {
useHTML:true, // Make our labels HTML
formatter: function() { // Wrap the text of each label with a span tag
// Id of the span is equal to 'label-<Name of your label>'
return "<span id='label-" + this.point.name+ "'>" +
this.point.name + // And draw the label itself inside the span
"</span>";
}
}
Below the your chart options write event handlers:
// On the hover event of each label we can manually call the hover of
// each segment of your pie chart
$('#label-AAA').hover(
// When the mouse pointer enters the label, make it hovered and show its tooltip
function() {
// data[0] - AAA segment of the chart
mychart.series[0].data[0].setState('hover');
// Refresh the tooltip of this segment
mychart.tooltip.refresh(mychart.series[0].points[0]);
},
function() { // When the mouse pointer leaves the label
mychart.tooltip.hide();
});
For each label the code is same. The disadvantage of this approach is that you have to know all labels names in advance. Here is JSFiddle: http://jsfiddle.net/wh4mw0o7/4/

Resources