Develop Reference

How to see truncated text with hover in highcharts?

I'm using the highcharts-react-official package and sometimes my charts have texts that are long enough to be truncated. In those cases the texts end with "...".
I would like to be able to see the full text if I hover the mouse over it. Is that possible somehow?
Edited: See the picture. The truncated text is the third one from the top.
Edited: I actually found out that the "tooltip" option can fix this, but I wonder if it's possible to configure the tooltip so that it only appears if the text is truncated?
My chart

The possible solution is to set custom "ellipsis" in formatter, according to the length of the label text.
dataLabels: {
enabled: true,
inside: true,
formatter: function() {
let name = this.key;
if (name.length > 10) {
name = name.substring(0, 8) + '...';
}
return name;
}
},
Then, you can easily check which label has an abbreviated text. For checking it and setting the tooltip on point hover, use the point.mouseOver() event.
point: {
events: {
mouseOver: function() {
let point = this;
let name = point.options.name;
if (name.length > 10) {
point.series.chart.update({
tooltip: {
enabled: true
}
});
}
},
mouseOut: function() {
this.series.chart.update({
tooltip: {
enabled: false
}
});
}
}
}
API References:
https://api.highcharts.com/highcharts/series.column.events.mouseOver
https://api.highcharts.com/highcharts/series.column.events.mouseOut
Demo:
https://jsfiddle.net/BlackLabel/c4qezstf/

Highcharts - Suppress points being dragged on drag event

I'm new to Highcharts - it seems you can only trigger drag events if the appropriate dragDrop events are defined and enabled on a series. E.g. https://api.highcharts.com/highcharts/plotOptions.series.dragDrop
How can I suppress the points actually being moved around in my chart? I have tried setting allowPointSelect: false and disabling both draggableX and draggableY but of course doing that don't fire any drag events. I have also tried event.preventDefault but no luck
What I'm basically looking for is to have a user drag over a range in a line/area chart from startX/Y to endX/Y and display the results to the user (which I can successfully get using mouseOver - a nice feature!)

For such a feature, you don't need to use draggable-points module. A simple custom solution with a crosshair and dynamically added/removed plot-lines will be enough. For example:
chart: {
animation: false,
events: {
load: function() {
const chart = this;
this.series[0].points.forEach(point => {
point.graphic.on('mousedown', function() {
chart.draggedPoint = point;
chart.xAxis[0].update({
plotLines: [{
width: 2,
color: 'grey',
dashStyle: 'ShortDash',
value: point.x
}]
});
});
});
document.body.addEventListener('mouseup', function() {
chart.draggedPoint = null;
chart.xAxis[0].update({
plotLines: []
});
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/rsuj93at/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

Chart.js: For tooltips, can we achieve something like "only-when-not-intersect: true"? (Touchscreen hover/click conflict)

In particular, is there a way to only trigger hover tips if we are NOT intersecting an element?
More background:
Trying to work out some touch screen compatibility issues. We have a custom onclick listener that renders a popup if we click on a data point; we also have a custom tooltip we render when we hover over the chart with intersect set to false currently. The issue is, on touch screens, if I click on a data point, both the tooltip and the popup shows up. I can use z-index and / or javascript in the onclick-listener to hide the tooltip, but both methods entail a slight delay: that is, the tooltip first shows for a split second, and then it's hidden. Is there any way to make this behave more elegantly? Thanks!
Edit:
Sorry for not being clear enough - this is particularly a question about Chart.js (v2), and to include some example:
const chartEl= document.getElementById('chartEl').getContext('2d');
[#chartEl is a canvas element: <canvas id="chartEl"></canvas>]
const justAChart = new Chart(chartEl,
{
data: {
datasets: someDataSet,
},
type: 'line',
responsive: true,
options: {
hover: {
mode: 'index',
intersect: false
},
tooltips: {
mode: 'index',
intersect: false,
// custom tooltip rendering
custom: someCustomTooltip,
}
}
};
);
// Onclick listener for popup when clicking on a datapoint
document.getElementById("chartEl").onclick = function(evt){
let points = justAChart.getElementsAtEventForMode(evt, 'point', justAChart.options);
if (points .length > 0) {
showThePopup()
}
}

How to synchronize the Highchart Sunburst behavior

As shown in the image, I want to show two sunbursts next to each other. I want to implement it with Highchart and react in such a way where,
If user mouse over on any data point on one sunburst, same data point should get highlighted on another chart, while other data points just goes into disabled mode or changes their color to white

In mouseOver event, by using references to the charts, you can programmatically set 'hover' state at the right point:
point: {
events: {
mouseOver: function() {
const chart1 = component.highchartsChart1.current.chart;
const chart2 = component.highchartsChart2.current.chart;
function clearState(chart) {
Highcharts.each(chart.series[0].points, function(p) {
p.setState("");
});
}
if (this.series.chart === chart1) {
clearState(chart2);
chart2.series[0].points[this.index].setState("hover");
} else {
clearState(chart1);
chart1.series[0].points[this.index].setState("hover");
}
}
}
}
Live demo: https://codesandbox.io/s/nn54z2234m
API: https://api.highcharts.com/class-reference/Highcharts.Point#setState

Created function not found

I'm trying to create a simple function, but at runtime firebug says the function does not exist.
Here's the function code:
<script type="text/javascript">
function load_qtip(apply_qtip_to) {
$(apply_qtip_to).each(function(){
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
title: {
text: 'Nieuwsbladshop.be - ' + $(this).attr('tooltip'), // Give the tooltip a title using each elements text
//button: 'Sluiten' // Show a close link in the title
}
},
position: {
corner: {
target: 'bottomMiddle', // Position the tooltip above the link
tooltip: 'topMiddle'
},
adjust: {
screen: true // Keep the tooltip on-screen at all times
}
},
show: {
when: 'mouseover',
solo: true // Only show one tooltip at a time
},
hide: 'mouseout',
style: {
tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light', // Use the default light style
width: 250 // Set the tooltip width
}
})
}
}
</script>
And I'm trying to call it here:
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
load_qtip('#shopcarousel a[rel]');
// Use the each() method to gain access to each elements attributes
});
</script>
What am I doing wrong?

You are missing a ), closing the each call.
Change last line in the function declaration to
);}
For similar problems in the future, try pasting your code into http://www.jslint.com/