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
Related
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
Is there any way to completely hide scrollbar's buttons which contain arrow?
In addition to this, is there any way I can set the position of scrollbar such as setting y value so that the scrollbar hovers on the chart?
Setting its color to transparent doesn't help.
scrollbar: {
buttonBackgroundColor: 'transparent',
buttonBorderWidth: 0,
buttonArrowColor: 'transparent',
buttonBorderRadius: 0
}
EDIT:
Even if I hide the elements, I cannot use the space left as the picture below.
You can manipulate SVG elements.
chart: {
events: {
load: function () {
var chart = this;
chart.scroller.scrollbarButtons[0].hide();
chart.scroller.scrollbarButtons[1].hide();
}
}
},
Example:
http://jsfiddle.net/fexw25Lz/
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/
The default behavior of the x-axis title alignment is within the bounds of the x-axis. However, the legend alignment is within the bounds of the entire chart. Thus, if you align both center, they have a slight offset. How can I get the legend to base its position off of the x-axis bounds instead? My graph options are dynamic, so I would need to do it dynamically.
Sample JS Fiddle
$('#container').highcharts({
legend: { margin:5, padding:0 },
xAxis:{
title:{
text:'THIS IS MY X-AXIS TITLE',
align:'middle',
},
categories:["A","B","C","D","E","F"]
}
});
Thanks in advance!
Example for you: http://jsfiddle.net/xqag5e72/2/
In short, you can change translation for legend to be similar to xAxis' title:
function moveLegend(e) {
var legend = this.legend,
x = this.plotLeft + (this.xAxis[0].width / 2) - legend.group.getBBox().width / 2,
y = legend.group.translateY;
legend.group.attr({
transform: 'translate(' + x + ',' + y +')'
});
}
Note: I'm using load and redraw events, to translate legend after first initialization and later to make this legend responsive.
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.