Show both x and y axis values on line chart

[jonni83]

On a line graph tooltip, is there a way to show both the x and y axis values? Using the tooltipFormatFieldlist doesn't seem to have any impact.

tooltipFormatFieldlist: ['x','y']

[mcmanuss8]

I had good luck using tooltipFormatter. You can get to the x and y values using fields.x and fields.y.

Try something like:

tooltipFormatter: function (sparkline, options, fields) { return "x: " + fields.x + " y: " + fields.y + "
"; }

In my case I was using unixtime for x values to represent date/time, so I had to do some custom work anyway to reformat the x value into a human readable format. There may be an easier way without setting a custom function, but I didn't look too hard...

[cwgh1]

I know this is long after the discussion ended, but I found @mcmanuss8's information useful for my own sparkline where I wanted to show a time X value in the tooltip. I modified the example JS at https://stackoverflow.com/questions/31178441/jquery-getting-x-values-in-sparkline / http://jsfiddle.net/PfzXg/1231/ and produced:

// Draw a sparkline for the #sparkline element with 'minutes in the last 24 hrs' as x values function pad(n){return n<10 ? '0'+n : n} $('#sparkline').sparkline([[1200,1], [1320,4], [1360,6], [1400,3], [1440,5]], { type: 'line', height: '200', width: '240', barWidth: 20, barSpacing: 10, barColor: '#615c5a', fillColor:"white",
tooltipFormatter: function (sparkline, options, fields) { var now = new Date(Date.now()); timepoint=new Date(now-1000*60*(1440-fields.x)); timelabel=pad(timepoint.getHours()) + ":" + pad(timepoint.getMinutes()); return "" + timelabel + "hrs " + fields.y + "ug/l"; } });

I only want to show at most one day's worth of data (1440 minutes) where the x values are at least several minutes apart. So I render the data points for now x=1440, and 24 hours ago as x=0. Then I do some calculations and formatting in JS as @mcmanuss8 alluded to.