Percentage and value combination for Chartkick Y axis

Question

I'm using https://github.com/ankane/chartkick in my Rails application and I would like to draw a line chart (multiple series to be specyfic) which will show on Y axis the percentage value but in the tooltip the actual numeric value. Is this somehow achievable (can be in any JS chart adapter: Chart.js, Google Charts or Highcharts)?

Answer 1

with google charts, you can easily customize both the axis labels and the tooltips

the column values for each row can be intrinsic values such as strings or numbers

alternatively, you can use object notation to provide the values

each cell in the data table can be represented as an object with the following keys

v - value
f - formatted value

which means we can provide the value we want for the y-axis,
and a formatted value which displays on the tooltip

{
  v: 0.62,
  f: '62'
}

although, primarily focused on tooltips, here is a simple example to demonstrate

if for some reason that alone does not meet your needs

both the axis labels and tooltips can be further customized as needed

axis labels
found in the configuration options for a line chart,
custom axis labels can be provided using ticks
for the y-axis, the specific option would be vAxis.ticks
which takes an array of values --> [0.10, 0.20, 0.30]
or objects, again with the above keys

[
  {v: 0.10, f: '10%'},
  {v: 0.20, f: '20%'},
  {v: 0.30, f: '30%'}
]

here is a working example of using ticks

tooltips
customizing tooltips is fairly straight forward

as mentioned, the default tooltip will display the formatted value (f:)

or you can provide an html string with the content you need displayed

each series may have its own custom tooltip,
add a 'tooltip' column role after each series column

here is a working example for providing custom html tooltips...