Please see this JSFiddle.
In this example, you can see sum of all values at top left corner.
If you click on any legend item, it will be disabled, but the total value doesn't reflect it. The text should be updated to not include that disabled item. How can I do this?
While Ondkloss's answer works fine. But I have found a simpler solution, by using redraw event instead of load. JSFiddle
You can use the legendItemClick event to update the rendered text by keeping a reference to the Element. For example:
var totalText;
var chart = new Highcharts.Chart({
chart: {
events: {
load: function(event) {
totalText = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
}
//...
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function(e) {
var newTotal = this.series.total + (this.visible ? -this.y : this.y);
totalText.attr({ text: 'Total: '+newTotal });
}
}
}
}
}
});
See this updated JSFiddle for a demonstration.
Related
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/
I have a c3.js stacked barchart that updates when you hover over a Leaflet map, and I need the tooltip to be static as otherwise the user will hover over other areas of the map and change the data in the barchart, before actually reaching it. However, I'm new to coding and especially new to C3 and I can't get around how to make the tooltip static. Also, does anyone know how to style the tooltip later? I have only found very complex examples online, but it feels like I should be able to do it somewhere after I generate the chart.
Any help would be much appreciated!
Here is my code:
function getMiniChartData(properties) {
var values = [
['rape', rape[properties['gss_code']]],
['other sexual', other_sexual[properties['gss_code']]]];
console.log(values);
return values;
}
var chart;
function drawMiniChart(properties) {
console.log('drawing mini chart');
var data = getMiniChartData(properties);
chart = c3.generate({
bindto: '#minichart',
color: {
pattern: ['#E31A1C', '#BD0026']
},
point: {
show: false
},
tooltip: {
show: true
},
data: {
columns: data,
type: 'bar',
groups: [
['rape', 'other sexual']
]
},
axis: {
y: {
max:60,
min:0
}
},
grid: {
y: {
lines: [{
value: 0
}]
}
}
});
}
function updateMiniChartData(properties) {
console.log('updating mini chart');
var data = getMiniChartData(properties);
chart.load({
columns: data
});
}
Just edit the position in the tooltip :
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
}
This will set the tooltip to always be at the top of the point. So it stays at the same y coordinate (top:0) but follows the points x value. You could go further and set it to stay at one position on the page.
Check this fiddle I have put together : http://jsfiddle.net/thatOneGuy/owhxgaqm/185/
This question will help you out : C3 charts - contents of tooltip clickable
If you want it visible all the time just add this code :
var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
setTimeout(originalHideTooltip, 100)
};
I have a group of charts which have the same categories.
When user hover on the chart and the tooltip is shown, I need to set all charts's corresponding point state to hover to help user to compare the data.
Firstly I use mouseOver and mouseOut events and it almost meet my needs, but I use shared tooltip so sometimes the tooltip shows without mouse on the point, so the event is not fired.
So I guess I need an event that when the tooltip shows/hides, and I find this and try tooltipRefresh event but I can't find the exactly index of on which point the tooltip shows. I have tried:
tooltipRefresh: function(e) {
var index = this.hoverPoint.index; //No dependentable
}
Is that any way that I can get the index at the right event firing moment?
you can use Label which just like the tootip, show X, Y value on the Lable.
What i did is :
1.click on one chart === >
2.get X value ===>
3.fire a Event (click event of chart) === >
4.render Label on every other chart using X (get Y value in each chart by X)
when create chart, I set an click event
options.chart = $.extend(true, options.chart, {
renderTo: 'hChart_' + chartIndex,
type: 'spline',
events: {
click: function (event) {
if($scope.label.length > 0){
$scope.clearAllLabels();
}else{
var charts = $scope.ui.charts;
$.each(charts, function (index, chart) {
//render Label to chart
});
}
}
}
});
Below is add label in chart.
var label = chart.renderer.label(
moment(xAxis).format('dddd, MMM DD, HH:mm:ss') + '<br>' + kpiName + ': <b>' + Highcharts.numberFormat(yAxis, 2) + kpiUnit + '</b>',
120,
40)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
lineHeight: '20%',
fontSize: '11px',
color: '#FFFFFF'
})
.add();
Hope it will help you.
Here is the scenario. I've multiple highstocks say 10 charts on a single page. Currently I've written 500 lines of code to position the legend, show tooltip and refresh the legend values on mousemove.
No. of legends vary per chart. On mousemove values of all the legends are updated. I need to optimize the code I am using highstocks v1.2.2.
Above screenshot shows 2 charts. Return, Basket, vs Basket Spread are legends and it's values are updated on every mousemove.
Please find this fiddle for example. In my case legends are positioned and updated values on mouse move with hundreds of lines of code. When I move the mouse the legend values of Return and Basket of first chart and the legend values of vs Basket Spread are updated. It's working fine but with lots of javascript code. So I need to optimize it less code or with highstocks built-in feature.
Update
User #wergeld has posted new fiddle. As I've shown in screenshot when cross-hair is being moved over any chart, the legend values of all the charts should be updated.
Is there anyway to implement the same functionality with less code or is there built-in feature available in highstocks ???
Using this as a reference.
Basic example would be to use the events.mouseover methods:
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var theLegendList = $('#legend');
var theSeriesName = this.series.name;
var theYValue = this.y;
$('li', theLegendList).each(function (l) {
if (this.innerText.split(':')[0] == theSeriesName) {
this.innerText = theSeriesName + ': ' + theYValue;
}
});
}
}
}
}
}
This is assuming I have modded the <li> to be:
$('<li>')
.css('color', serie.color)
.text(serie.name + ': NA')
.click(function () {
toggleSeries(i);
})
.appendTo($legend);
You would then need to handle the mouseout event but I do not know what you want to do there.
Working example.
EDIT:
Here is a version using your reference OHLC chart to put the values in a different legend location when any point in the chart is hovered.
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
//using the ohlc and volumn data sets created at runtime.
var stockVal = ohlc[this.index][4]; // show close value
var stockVolume = volume[this.index][1];
var theChart = $('#container').highcharts();
var theLegendList = $('#legend');
$('li', theLegendList).each(function (l) {
var legendTitle = theChart.series[l].name;
if (l === 0) {
this.innerText = legendTitle + ': ' + stockVal;
}
if (l === 1) {
this.innerText = legendTitle + ': ' + stockVolume;
}
});
}
}
}
}
}
I am building a line chart and I would like, when I click on a point of the line, to display a popup containing some data about this point.
The issue I try to resolve is to get the id, the series associated with this point or something like that.
Here is my code :
plotOptions: {
column: {
pointWidth: 20
},
series: {
cursor: 'pointer',
events: {
click: function(event) {
requestData(event.point);
}
}
}
I tried
requestData(this.point)
,
requestData(this.point.id)
also but it doesn't work.
How do we get the id of a point ?
Thanks a lot.
According to the docs, event.point holds a pointer to the nearest point on the graph.
So I'd write the event.point to the console, and see what's available.
console.log(event.point);
From the docs:
click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.
Example based on the example from the docs: http://jsfiddle.net/5nTYd/
Click a point, and check the console.
I just did this by passing 3 objects into the series data array and then pulling it out of the object's config attribute from the click.
So you can construct your series data something like this:
series: [{
name: 'Example',
yAxis: 0,
type: 'spline',
data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
In the data attribute above the 1st element is the date (x), the 2nd element is another data point (y), and the 3rd is the id of the object that represent that data object. This "z" will not show up on the graph but will show up as the 3rd element in the config array. For example: using plotOptions point attribute to capture the click, the ID of the object is in the alert as this.config[2]
plotOptions: {
series: {
cursor: 'pointer',
point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])}}}
}
},
To return the 'ID' of the selected point on the chart use the 'X' value:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
// Log to console
console.log(event.point);
alert(this.name +' clicked\n'+
'Alt: '+ event.altKey +'\n'+
'Control: '+ event.ctrlKey +'\n'+
'Shift: '+ event.shiftKey +'\n'+
'Index: '+ event.point.x);
}
}
}
},
See an example here: http://jsfiddle.net/engemasa/mxRwg/
I had the same problem ... if I understand correctly.
My solution is this, to get the id of the series ...
See if it helps ...
plotOptions{
series:{
cursor: 'pointer',
events: {
click: function(event) {
console.log(event.point.series.userOptions.id);
}
}
}
i found this old post in my search to ==>add a marker to a point when i click a Highcharts "Trend Line" [in examples: "line-time-series"] chart[when i click anywhere on the drawn line itself]. well, without showing you too much code, look in the
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert("X("+this.x+"),Y("+this.y+")");
}//click
}//events
}//point
if you would like more detail, i'm happy to provide!
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
console.log(this);
alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])
}
}
}
}
},