I am using FLOT to display graphs.
To display tootip i am using https://github.com/krzysu/flot.tooltip.
Now I want to customize content of tooltip so I am using callback to set content of tooltip.
Code snippet:
tooltip: true,
tooltipOpts: {
content: function(label, xval, yval, flotItem){
var xAxis = plot.getXAxes();
return xval;
},
defaultTheme: false
}
But its giving me error
caught TypeError: Object function (label, xval, yval, flotItem){
var xAxis = plot.getXAxes();
return xval;
} has no method 'replace'
Could any one help me ?
Thanks in advance.
The documentation states that:
If you require even more control over how the tooltip is generated you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
xval is the numeric x axis value where the tooltip is located. It is not a string. The replace method it is failing on is the standard string.replace:
> "".replace
function replace() { [native code] }
I'm not using the flot tooltip. There is easier way to show tooltip and customize it. Check out this fiddler:
http://jsfiddle.net/Margo/yKG7X/5/
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, x + " / " + y );
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200).fadeOut(6000);
}
Hope it helps :)
Related
I have a null value in my HighCharts line chart. I set connectNulls: true so that the line does not disconnect when the data is null. However I cannot hover over that null value. When I try to, it automatically jumps to the nearest non-null point.
Fiddle: https://jsfiddle.net/wmoxLy4r/2/
What I am trying to do is to:
1/ Allow hovering over null values
2/ When hovering over null values, I would like to show the value of the closest non-null value to the left. In this case it would show 129.2.
I thought about imputing the null value with the closest non-null value to its left but then the plot will be flat at that section due to 2 periods with the same values. I want the plot to looks like it does right now. Appreciate any help
You can preprocess your data and calculate the middle points. A null point doesn't have a marker and it's not possible to show a tooltip for it.
const data = [...];
const processedData = data.map((dataEl, index) => {
if (!dataEl) {
return {
y: (data[index - 1] + data[index + 1]) / 2,
isCalculatedValue: true,
marker: {
fillColor: 'red',
radius: 1
}
}
}
return dataEl;
});
By using tooltip.formatter function, you can show the previous point value in a tooltip.
tooltip: {
formatter: function(tooltip) {
let point = this.point;
if (point.isCalculatedValue) {
point = this.series.points[point.index - 1];
}
return "<span style='font-size: 10px'>" + point.category + "</span><br/>" +
"<span style='color:" + point.series.color +
"'>●</span> Line series: <b>" + point.y + "</b><br/>";
}
}
Live demo: https://jsfiddle.net/BlackLabel/nrmgaw6q/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I'm trying to create something similar to the image below. Where each column has a heading with it.
I know that chart.renderer.text can be used to create & place custom text on chart. However, I'm unable to find a way to fetch the column/node coordinates data(x,y) which would help me place them.
Also is there a programmatic way to do this task. For example, a function that fetches all the columns coordinates and populates all the headings from an existing list.
To summarize:
How to fetch a columns (x,y) Coordinates?
How to dynamically place headings for all columns from a list?
Image
You can get the required coordinates and place the headers in render event, for example:
events: {
render: function() {
var chart = this,
series = chart.series[0],
columns = series.nodeColumns,
isFirst,
isLast,
xPos;
if (!series.customHeaders) {
series.customHeaders = [];
}
columns.forEach(function(column, i) {
xPos = column[0].nodeX + chart.plotLeft;
isFirst = i === 0;
isLast = i === columns.length - 1;
if (!series.customHeaders[i]) {
series.customHeaders.push(
chart.renderer.text(
headers[i],
xPos,
80
).attr({
translateX: isFirst ? 0 : (
isLast ?
series.options.nodeWidth :
series.options.nodeWidth / 2
),
align: isFirst ? 'left' : (
isLast ? 'right' : 'center'
)
}).add()
)
} else {
series.customHeaders[i].attr({
x: xPos
});
}
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/6Lvdufbp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Seems like Highcharts is skipping a few data points in the shared tooltip for high number of data points (2500+).
I am trying to render a dual axis chart with 2500+ data points for 4 series - using Highcharts. I am also using a shared tooltip option to render my custom tooltip html. But at times Highcharts skips 1 or 2 data points in the tooltip. For example, when I slowly hover over each of the points from left to right, then I am supposed to see '1st April' after '31st March'. But instead, I see '2nd April'. Is it a bug? Or am I missing something? (I have verified that all the dates are present in the categories passed to the Highcharts.)
tooltip: {
borderColor: '#ccc',
backgroundColor: 'transparent',
borderWidth: 0,
shadow: false,
shared: true, //show all series values together
useHTML: true,
// hideDelay: 50000,
formatter: function() {
if (props.config.type == 'pie') {
return 'Value : ' + this.y;
} else {
let html = '<div class="fixed-tooltip">';
html += formatTooltipDate(this.x);
if (this.points &&
this.points.length > 1 &&
props.config.type != "combination") { //multiple series*(see note below)
//*combination series are having 1 point, so handled in the else section as single series.
let dateIndex = props.config.data.categories.indexOf(this.x);
console.log(" date ", this.x);
console.log(" dateIndex ", dateIndex);
if (props.config.type == "dual") {
let dualAxisTitles = props.config.dualAxisTitles;
html += formatDualSeriesTooltipData(this.x, dateIndex, this.points, dualAxisTitles);
} else {
html += formatMultiSeriesTooltipData(this.x, dateIndex, this.points);
}
} else { //single series
//for combination charts have a custom tooltip logic
if (props.config.type == "combination") {
let dateIndex = props.config.data.categories.indexOf(this.x);
html += formatMultiSeriesTooltipData(this.x, dateIndex, props.config.data.series);
} else {
let seriesColor = this.points[0].point.series.color;
let seriesName = this.points[0].point.series.name;
let value = this.points[0].y;
html += formatSingleSeriesTooltipData(value);
}
}
html += '</div>';
return html;
}
}
}
Expected to see a tooltip for "1st April" data point, after "31st March". Instead seeing tooltip for "2nd April" data point.
The points are skipped if there is no enough space for them in the plot area (1px for 1 point). The solution is to set a adequate chart width:
chart: {
width: 1000
},
Live demo: http://jsfiddle.net/BlackLabel/yjk0ta43/
API: https://api.highcharts.com/highstock/chart.width
I built a widget with multiple y Axes very similar to the official sample here: http://www.highcharts.com/stock/demo/candlestick-and-volume
I'm trying to have some sort of visual separation between the chart panes, either by
applying a special style to the maximum grid line for each pane, or
adding a horizontal line in the whitespace between the panes
The only approach i got working is using PlotLines, but I'd rather have a separator that's independent of zoom levels. Any ideas on how to achieve this?
Use Renderer to draw a path between y axes.
function drawSeparator() {
let separator = this.separator;
const options = this.options.chart.separator;
if (options && options.enabled) {
if (!separator) {
this.separator = separator = this.renderer.path({
d: 'M 0 0',
'stroke-width': options.width === undefined ? 1 : options.width,
stroke: options.color || 'black'
}).add();
}
const topAxisBottom = this.yAxis[0].top + this.yAxis[0].height;
const bottomAxisTop = this.yAxis[1].top;
const y = topAxisBottom + (bottomAxisTop - topAxisBottom) / 2;
separator.attr({
d: `M 0 ${y} L ${this.chartWidth} ${y}`
});
}
}
Call the method on load/redraw event
chart: {
events: {
load: drawSeparator,
redraw: drawSeparator
},
separator: {
enabled: true,
width: 3,
color: 'blue'
}
},
You can modify the path's d attribute, the path starts from axis.left and stops on axis.left + axis.width
Live example and output
http://jsfiddle.net/L11uqxgq/
Can you please take a look at This Demo and let me know how I can add some custom data from an array to tooltip in highchart?
var extras = ["Values More Than 1000", "Values More Than 2000", "Values More Than 3000", "Values More Than 4000", "Values More Than 5000"];
As you can see the array length is equal to the column numbers so the extras[0] with go with tooltip for column 1
some thing like
You can customize the tooltip with the formatter option.
tooltip: {
formatter: function () {
var index = this.series.points.indexOf(this.point);
return extras[index] + ': ' + this.y;
},
style: {
width: 250,
fontSize: '15px'
}
}
Here's a jsFiddle:
http://jsfiddle.net/opgp10mj/3/