How can i remove day name from the tooltip (highlighted in red) in high-stock chart.
You can change the standard dateTimeFormat for the day* label this chart uses.
* It might be you need to change something else as day, depending on your chart content. See the dateTimeLabel API for all possibilities you can change.
tooltip: {
dateTimeLabelFormats: {
day: '%b %e, %Y'
}
},
This changes the format to Mar 01, 2000, for example.
If you want a different time format you can check out the PHP strftime which Highcharts uses for their formatting as stated in their dateFormat API
Here you can find a working JSFiddle
I guess you can achieve this by editing your tooltip format during the declaration.
example of tooltip configuration
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e %b %Y',
new Date(this.x))
+ ' date, ' + this.y;
}
},
You can also customize your X axis tooltip by using this doc :
https://api.highcharts.com/highcharts/plotOptions.series.tooltip
Related
I feel i've been searching the whole internet now to try and find the easiest way to get all the data from multiple lines, when hovering over a specific time in an highstock chart.
Can someone help me with that? :)
You can get information about hovered points by using mouseOver event or tooltip.formatter
Example for getting multiple points information when tooltip is shared:
tooltip: {
formatter: function() {
let tooltip = this.points.reduce(function(s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.y + 'm';
}, '<b>' + new Date(this.x) + '</b>');
inf.innerHTML = tooltip;
return tooltip;
},
shared: true
},
Demo:
https://jsfiddle.net/BlackLabel/veqj67yf/
https://jsfiddle.net/BlackLabel/quympake/
API Reference:
https://api.highcharts.com/highcharts/series.line.point.events.mouseOver
https://api.highcharts.com/highcharts/tooltip.formatter
I am trying to plot time-series data using Highcharts histogram & would like to have some way to highlight the bar that contains the latest datapoint (it will be the last element in the array) and also have a custom tooltip for the same.
So let's say I am plotting average daily temperatures for a city over a 1 year period -- how would I highlight the bar that contains the latest temperature & also provide a tooltip that indicates the same.
Lets say, in THIS Highcharts example the last 3 in the data array is the latest temperature & I would like to highlight, as well as provide a custom tooltip for the bar with that value.
Something similar has been discussed HERE but it doesn't talk about highlighting the relevant bar.
You can update the last point in load event and add a flag to distinguish it in the tooltip's formatter function:
chart: {
events: {
load: function() {
var histogramSeries = this.series[0],
lastPoint = histogramSeries.points[histogramSeries.points.length - 1];
lastPoint.update({
color: 'red'
});
lastPoint.isLast = true;
}
}
},
tooltip: {
formatter: function() {
if (this.point.isLast) {
return '<b>Last point result: </b> ' + this.y;
}
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/cefy419v/
API Reference:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts.Point#update
I'm using ChartJS to build a bar chart. My chart contains one bar for each week of the year. I would like the tooltips of each bar to display "Week 15 (Apr 10 - Apr 16)" for example, while the corresponding label in the x-axis should display only the week number, so "15".
This answer describes exactly what I want to accomplish, though I'm using a bar chart, not a scatterplot. I tried that method on my bar chart and extracted the week number form the label I added to the dataset ("Week 15 (Apr 10 - Apr 16)" --> "15"). However, the userCallback function overrides both the x-axis labels and the tooltip label with the value "15". Can someone show me how I can modify only the x-axis label of each bar (without affecting the tooltip label) or suggest an alternative approach?
EDIT: fiddle with my code: https://jsfiddle.net/96z57gqf/. The x-axis label is correct, but I need the bar tooltip to keep the original value ("Week 12", "Week 13" and so on).
xAxes: [{
ticks: {
userCallback: function(value, index, values) {
return value.replace("Week ","");
}
}
}]
EDIT2/SOLUTION: See https://jsfiddle.net/3ft4wrL9/. From the Vinod's answer below, I modified my options to include:
tooltips: {
mode: 'index',
intersect: true,
callbacks: {
title: function(tooltipItem, data) {
return data["labels"][tooltipItem[0]["index"]];
}
}
},
If you are using chart.js 2 then you can use the tooltip callback method documented here like this inside options in order to customize your tooltip
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
//TODO return what you want using value of tooltipItem and data
}
}
}
I'm using dc.js to create a dashboard, the dataset contains 3 types of reading from 1 year in a 24 hour basis. (in the example fiddle, i only use 15 days just for demonstration purpose)
Here is the link to a JSFiddle to better illustrate my problem http://jsfiddle.net/table315/hLzLzhss/
I've used a row chart to show the total of each reading, and a heatmap to show the total reading of each day at each time.
When 1 type of reading from the row chart has selected, the heatmap doesn't seems to recalculate the min and max of the colour domain. (a heatbox shows a light colour even the value is the highest in the current filtered dataset. )
dayAndTimeChart
.width(30 * 24 + 500)
.height(20 * 31)
.dimension(dayAndTimeDimension)
.group(dayAndTimeGroup)
.keyAccessor(function(d) {
return d.key[0];
})
.valueAccessor(function(d) {
return d.key[1];
})
.colorAccessor(function(d) {
return d.value;
})
.colors(["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"])
.calculateColorDomain()
.title(function(d) {
return "Time: " + d.key[0] + "\n" +
"Day: " + d.key[1] + "\n" +
"value: " + d.value;
});
Is there something I'm missing here? or is it a bug? if that is the case, is there any workaround?
This is by design, because the color mapping may have some absolute meaning.
So if you want the domain to adjust and show the full range of colors for each new set of values, you need to calculateColorDomain() each time the chart is redrawn:
.on('preRedraw', function() {
dayAndTimeChart.calculateColorDomain();
})
Working fork of your fiddle: http://jsfiddle.net/gordonwoodhull/w1mzwv8d/2/
I am using this code for Highcharts tooltip generation:
tooltip: {
shared: true,
crosshairs: true,
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': ' + point.y + ' m/s';
});
return s;
}
}
It works perfectly for charts which use spline for the defaultSeriesType but it doesn't work for scatter charts.
See this Fiddle http://jsfiddle.net/s83aT/ for both spline and scatter in action.
Any advice will be much appreciated. Thanks in advance.
After Sebastian Bochan pointed out that "shared: true" is part of the issue I looked into this some more and here is what I found out and how I ultimately solved the problem. For whatever reason the Fiddle linked in the question was screwed up.
shared: true
is required if there is more than one series in the chart and one wants to have all series displayed in the same tooltip. In my case this was a leftover from other plots I made but not needed in the single series plots my original question was about.
For single series plots "shared: true" should not be used. It defaults to "shared: false" and thus "shared" doesn't need to be included at all.
Here's the formatter code which I am now using and it works for all single series, whether it's spline or scatter:
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +
'</b> ' + this.series.name + ': ' + this.y + ' deg';
}
},
See http://jsfiddle.net/Reality_Extractor/pNFYL/ for both spline and scatter plots in action.