from the highcharts api it says we can edit the fontsize in the tooltip, however, this only edits the values and not the x axis label.
Is there a way to increase the size of the Tuesday, May 17... etc as well? i.e. the x axis label?
Editing the real xaxis label did not work.
Thanks! :)
For custom tooltips formatting, you can use the formatter property to pass a function which returns your custom html.
tooltip: {
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
}
},
useHTML: true
Fiddle here
More info here
Related
I have a graph that looks like the below. By default each tooltip value is in it's own tooltip "bubble", with the datetime at the bottom of the Y axis (hovering on top of the X labels).
The problem is that changing the format of the datetime to match locale is not dynamic with Highcharts. I know I could have users change the dateTimeLabelFormats to match their locale, but I'm looking to leverage moment.js and their locale formatting built in.
I only need to change the datetime in these charts and nothing else.
When I try this code below, it gives me the locale leverage I'm looking for, but the tooltips are merged into 1 box and doesn't have that same feel as default.
tooltip: {
enabled: true,
dateTimeLabelFormats: {
//minute: '%e %b %H:%M',
hour: '%e %b %H:%M'
},
// For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
formatter: function() {
var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';
$.each(this.points, function(i, point) {
toolTipTxt += '<br/><span style="color:'+ point.series.color +'"> ' + point.series.name + ': ' + point.y+'</span>';
});
return toolTipTxt;
},
crosshairs: true,
shared: true
},
Is there a way to emulate default tooltip with the formatter? Individual "bubbles" for the values and the timestamp hovering at the bottom?
Is it possible to use xDateFormat with moment.js somehow?
I found a solution that works, right from the Highcharts API documentation for tooltip split.
The jsfiddle example from the API documentation had everything I needed (except moment.js).
I must have overlooked this 100 times today. Here's the final code that worked for me, and a screenshot of the result.
Now the tooltip's header will be in the right locale without the user changing any code.
tooltip: {
enabled: true,
// For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
formatter: function () {
// The first returned item is the header, subsequent items are the points
return [moment.unix( this.x / 1000).format("LLL")].concat(
this.points.map(function (point) {
return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
})
);
},
split: true,
},
I have a chart which shows points, when I hover over these points the co-ordinates of the point is shown.
I want to add a third line to this tooltip showing the date associated with the point. I have added this date to the raw data fed to the graph but I'm not sure how to make it show in this box? Basically I want to add a different value into MY DATE VALUE below for every point. How can this be done?
tooltip: {
borderRadius: 10,
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>' + MY DATE VALUE;
}
},
Thanks!
I've been trying to display the percentage on a NVD3 Pie Chart but I don't see how to do it... I'm looking for something like this
First of all, is there a graph option or a way to display something inside each part of the Pie Chart? If yes, is there an option to display a percentage instead of the exact values?
Thanks and enjoy your weekend!
As of version 1.1.10 of NVD3, it is possible to adjust the type of the label
Just call chart.pie.labelType("percent"); to label each slice with the corresponding percentage. It is also possible to display the key labelType("key") or value labelType("value") of each slice.
Complete example:
var slices = [
{name:"Part 1",value:23},
{name:"Part 2",value:38},
{name:"Part 3",value:67}
];
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.name })
.y(function(d) { return d.value })
.color(d3.scale.category10().range())
.width(300)
.height(300);
chart.pie.pieLabelsOutside(false).labelType("percent");
d3.select("#chart")
.datum(slices)
.transition().duration(1200)
.attr('width', 300)
.attr('height', 300)
.call(chart);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
I am assuming you have been able to get the sample NVD3 Pie Chart working.
The only way as far as I know is to edit the pieChart.js. Pull the NVD3 source from here , and under / src / models / open up pieChart.js and add edit :
tooltip = function(key, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' % </p>'
}
Or here is a NVD3 hosted link to the pieChart.js , edit line 19 to look like this '<p>' + y + '</p>'
Make sure to add the script in your html page, so it ovverides pieChart settings inherited when loading nvd3.js
<script src="your/path/to/pieChart.js" type="application/javascript"></script>
UPDATE:
Just so you know, the data you pass into the chart will be rendered as it is, you will have make the percentage calculations and pass it into the chart. The pie chart slices size will be calculated based on the data you send into the chart. Just letting you know, disregard if you already knew it.
UPDATE: 30th July 2013
I just stumbled upon the correct way of editing the tooltip without tinkering with the pieChart.js file.
var chart = nv.models.pieChart().x(function(d) {
return d.key;
}).y(function(d) {
return d.daily[0].sales;
}).showLabels(true).values(function(d) {
return d;
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) {
return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
});
Just wanted you to update the answer. So now you know two ways of doing it.
Hope it helps you.
Hovering over a series in Highchart graph displays a popup with series name and Y value, in the example: 'Tokyo 9.5ºC'. I would like to display my own, custom text on hover - I can do that by modifying each point's name. At the same time I would like to hide the default series name and Y value. I've searched the doc but haven't found anything suitable. Any ideas how to approach this?
You'll have to specify a tooltip formatter yourself (see documentation):
tooltip: {
formatter: function() {
return 'The value for <b>'+ this.x +
'</b> is <b>'+ this.y +'</b>';
}
},
there you can just show the x-values if you like or your custom text.
Hope that helps.
I have modified the DEMO and created a new DEMO here
To customize the text displayed in the tooltip, you should use it like:
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
........
.....
....
tooltip: {
formatter: function() {
return '<strong>X value: </strong>'+ this.x;
}
},
});
if you want to format the second line of the tool tip, but leave the x-axis label name alone you can use point format instead of formatter.
tooltip: {
pointFormat: 'The value is point.y'
},
I'm using the jquery plugin jqplot for plotting some bar charts.
on hover, I'd like to display the tick for the bar and its value on a tooltip. I've tried
highlighter: { show: true,
showTooltip: true, // show a tooltip with data point values.
tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw.
tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both.
lineWidthAdjust: 2.5 // pixels to add to the size line stroking the data point marker
}
but it doesn't work. the bar visually gets lighter, and there's a small dot on the top (which would ideally go away--probably from line chart renderer stuff), but there is no tooltip anywhere. Anyone know how I can do this? I'll have lots of bars so the x-axis will be cluttered and kind of a mess if I show them down there only.
I go through jqplot.highlighter.js and find an undocumented property: tooltipContentEditor.
I use it to customize the tooltip to display x-axis label.
Use something like this:
highlighter:{
show:true,
tooltipContentEditor:tooltipContentEditor
},
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
nevermind, I did a roundabout way to create my own tooltip via jquery.
I left my highlighter settings as they were in my question (though you probably don't need the tooltip stuff).
In my js file after the bar chart is set up (after $.jqplot('chart', ...) I set up an on mouse hover binding, as some of the examples showed. I modified it like this:
$('#mychartdiv').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data ) {
var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
var mouseY = ev.pageY;
$('#chartpseudotooltip').html(ticks_array[pointIndex] + ', ' + data[1]);
var cssObj = {
'position' : 'absolute',
'font-weight' : 'bold',
'left' : mouseX + 'px', //usually needs more offset here
'top' : mouseY + 'px'
};
$('#chartpseudotooltip').css(cssObj);
}
);
$('#chartv').bind('jqplotDataUnhighlight',
function (ev) {
$('#chartpseudotooltip').html('');
}
);
explanation:
ticks_array is previously defined, containing the x axis tick strings. jqplot's data has the current data under your mouse as an [x-category-#, y-value] type array. pointIndex has the current highlighted bar #. Basically we will use this to get the tick string.
Then I styled the tooltip so that it appears close to where the mouse cursor is. You will probably need to subtract from mouseX and mouseY a bit if this div is in other positioned containers.
you can then style #chartpseudotooltip in your css. If you want the default styles you can just add it to .jqplot-highlighter-tooltip in the the jqplot.css.
hope this is helpful to others!
I am using the version of the highlighter plugin on the following link:
https://github.com/tryolabs/jqplot-highlighter
The parameters I am using:
highlighter: {
show:true,
tooltipLocation: 'n',
tooltipAxes: 'pieref', // exclusive to this version
tooltipAxisX: 20, // exclusive to this version
tooltipAxisY: 20, // exclusive to this version
useAxesFormatters: false,
formatString:'%s, %P',
}
The new parameters ensure a fixed location where the tooltip will appear. I prefer to place it on the upper left corner to avoid problems with resizing the container div.