Comments (20)
It's a bit late, but I've found recently how to change the tooltip for highcharts. You can use pointFormat
for tooltip
.
Documentation: http://api.highcharts.com/highcharts#plotOptions.series.tooltip.pointFormat
Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/pointformat/
<%= column_chart [
["Very Poor", p[1]],
["Poor", p[2]],
["Average", p[3]],
["Above Average", p[4]],
["Excellent", p[5]],
["N/A", p[6]]
],
height: "220px",
library: {
tooltip: {
pointFormat: 'Awesome values: <b>{point.y}</b>'
}
} %>
from chartkick.
@ankane I'd vote for option 2!
{
"name": "Example",
"data": [ 1, 2, 3 ],
"tooltips": [ "First", "Second", "Third" ]
}
Doesn't break the current interface, and is more flexible than 3.
I'd also suggest that it's important to support things like line breaks (\n
) and something for alignment (\t
?)
Something that I'm currently working towards would appreciate a tooltip looking something like this:
Incoming: 3
Outgoing: 6
Stock: 15
I appreciate that the Graph's JSON will bloat quite considerably... but other options that support this flexibility get complex fast.
from chartkick.
Do we already have a way to change the tooltip?
from chartkick.
Is it possible to include the full functionality of tooltip configuration as provided by Charts.js including callbacks? -> https://www.chartjs.org/docs/latest/configuration/tooltip.html
I'd love the possibility to change the different elements of the tooltip like title, label etc.
from chartkick.
Does Tooltip Customization feature is added ?? @ankane
from chartkick.
Just in case it's helpful at all in the feature planning process, I wanted to also chime in with an example of why I would want to customize the tooltips for some of my graphs.
In short, I'd like to use the tooltips to "dive in" to a datapoint in most graphs and display a third axis of data that I wouldn't want "at a glance" on the chart, but rather expose for a particular point when a user expresses some interest in it (e.g. hovering over a datapoint).
For example, here's one graph of the number of words in each sentence of a document:
Hovering over sentence 39's bullet and seeing "Sentence 39: 35 words" is fine and dandy, but... I'd much rather be able to show the actual sentence in the tooltip instead of the x/y values. Here, the intent is to highlight clusters of sentences with low/high variety in length, so being able to quickly view the actual sentences being displayed makes a lot of sense in determining what to do with them (should I shorten them? lengthen them?), but plotting the actual sentence on the graph doesn't make a lot of sense.
I would be happy to fandangle data into any format for this, but my ideal structure would look something like:
{
"name": "Example",
"data": [ 11, 25, 13 ], // word counts
"tooltips": [ "Sentence 1", "Sentence 2", "Sentence 3" ]
}
from chartkick.
I'd like also to be able to customize the tooltips, directly from chartkick and not doing special JS hacks updating the chart.
I'd like to change title, label, and be able to sort and filter the items.
from chartkick.
Sorry @jancantor, totally missed your comment. There's no way to do this right now. Customizing tooltips will be one of the next features.
from chartkick.
FYI for anyone wanting to customize the date/time format in a Chartjs time chart, you can already use options.scales[scaleId].time.tooltipFormat
ref: https://www.chartjs.org/docs/4.1.2/axes/cartesian/time.html#time-axis-specific-options
such as:
<%= line_chart data, library: { scales: { x: { time: { tooltipFormat: 'd MMM' } }}} %>
for tooltips such as 3 Jan
Follow this guide for labeling in the requested format:
https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
ref: https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md
OR, you can pass discrete: true
and build your own labels as in:
<%= line_chart data, discrete: true %>
from chartkick.
There's no way right now.
There's a pull request for changing the date format which I'll look at when I get the chance. ankane/chartkick.js#11
For price, I would round in Ruby until there's a better solution.
from chartkick.
In regards to customizing the tooltip, I want to know if there's a way to change the label for the 'Value' string?
Here's what my current code looks like:
<%= column_chart [
["Very Poor", p[1]],
["Poor", p[2]],
["Average", p[3]],
["Above Average", p[4]],
["Excellent", p[5]],
["N/A", p[6]]
],
height: "220px",
library: {
width: 665,
colors: ["#29abe2"],
tooltip: {
textStyle: {
color: "#333333"
}
},
bar: {
groupWidth: "50%"
},
vAxis: {
gridlines: {
color: "#eeeeee"
}
}
} %>
from chartkick.
@vdmgolub Thank you, it works!
from chartkick.
Since you can update your chart from JS, try this :
function customTooltip() {
// some logic
}
var chart = Chartkick.charts['yourChart'];
chart.options.library.tooltips.custom = customTooltip;
chart.setOptions(chart.options);
from chartkick.
Thanks @MatthieuGC 👍
Can a few people interested in this feature gives examples of how they want to use it? This will help with designing it. Current ideas:
- Add it inside data -
line_chart [{x: 1, y: 2, tooltip: "Text 1"}, {x: 1, y: 2, tooltip: "Text 2"}]
(requires a new data format) - Add it alongside data -
line_chart data, tooltips: ["Text 1", "Text 2"]
- Add string option -
line_chart data, tooltip: "The value is ${value}"
(easier to use, but less flexible)
from chartkick.
One more call for examples. Then closing this out.
from chartkick.
Hi @ankane , sorry I'm not using this anymore. All the three example you have provided would have been fine for me at the moment I've needed it.
from chartkick.
I do not care much how you design it. The data needs to be massaged into the chart anyway, so massaging tooltips one way or another is a wash. I do want to give it my full support though, because being able to change tooltips in ruby would be a godsend for me.
from chartkick.
@MatthieuGC What did you use to wait for the chart to load before trying to access it?
from chartkick.
BTW for anyone having issues with this... for some reason, pointFormat
stopped working for me - I didn't change any code, it all of a sudden broke. Making any changes to pointFormat
did nothing, but putting it into headerFormat
worked! I've noticed some inconsistency. Some of my pages use pure highcharts, some use chartkick with highcharts library, some pages have charts using both. So there may be some conflicting code. But even the pure highcharts charts pointFormat
broke recently on some charts. Moving to headerFormat
worked there as well.
from chartkick.
I am having an issue now where I am charting a numerical value, but want to display a formatted value in the tooltip. I have tried @MatthieuGC 's solution. I would also like to know the answer to @activklaus 's question. Can we configure using callbacks? If so, how? I cannot get it working like this in the line_chart options:
library: { plugins: { tooltips: { callbacks: { label: "function() { return 'newlabel'" }}}
from chartkick.
Related Issues (20)
- Better adding of plugins to Chart.js with Chartkick HOT 9
- Charts stuck at "Loading..." [example included] HOT 4
- CSP compliance breaks when used with Turbo Drive w/ and random nonce generator HOT 3
- Add support for chart.js 4.x HOT 3
- Add combo bar/line charts HOT 2
- Jruby Support HOT 1
- Support for Apex Charts HOT 1
- Add support for limiting the serie to a certain time frame HOT 1
- Support for polar (spiderweb) charts HOT 1
- Demo not rendering correctly in Safari HOT 2
- `createChart` is not fired after Turbo Frame renders the view HOT 8
- Comparisons in Two Date Ranges HOT 1
- Error importing Chartkick object HOT 2
- Provide ES module for JS with default exports HOT 1
- Rails 7 Setup Additional Step Needed HOT 4
- Canvas accessibility options like aria-label HOT 1
- preffix and suffix on column HOT 1
- X-axis is converted to integers even if datapoint contains alphanumeric characters HOT 1
- Some plugins not (fully) working with Chartkick with Importmaps HOT 2
- Conflicts with Action_text from rails and do not displaying in production(Heroku) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartkick.