Looking for some advice/solution to add additional hover text to a line chart.
I’m utilising the Glide native Chart Component (line chart) and have 3 x sets of data displayed, with each data set comprising 24 values (hourly figures across 24 hours) as shown below.
What I am trying to do is include the direction of the wind as a bearing and a cardinal value (IE 180 SOUTH).
I have tried using just the bearing as a 4th data set but because it is between a range of 0 - 360 this becomes the Y axis (defaults to highest range) and the 3 other data sets (because of their lower values) become almost flat.
I have tried using the cardinal values → SSE, South, NNW etc but as they are text it is not recognised and as such returns a 1 for all 24 values.
So, what I was hoping to achieve is have the cardinal value (SSE or similar) appear as part of the pop up/hover display as part of the wind value, so in the example test image above it would appear as Wind 23.6 Knots (SSE)
*I have the 24 x hourly wind bearings in a column and an adjacent java script column returning the related Cardinal Reference from the bearing.
Any known way to pull the 24 x hourly cardinal references into the chart hover element ?
Hey @Holy-Mackerel, I don’t think Glide lets you show two different fields in the chart hover right now.
What I usually do is combine both values in one column (like 12 mph (NW)) and use that as the display value, it works fine for quick charts.
If you really need custom hover info, you could build the chart using an HTML + JS block (Chart.js lets you control all that stuff). Bit more setup, but it gives full control. I’ve set this up for a similar dashboard before, so if you want, I can show you how to structure it.
Are you able to outline how you have combined both vales so they display in the chart please ?
When I have attempted to include both sets, because it is not a number it results in all data values displaying as 1. (From java script column or as template column)
IN the example above, the yellow is the wind bearing. Because the range is so large it flattens all the other lines out. This is part of the reason I would like to use the cardinal value (NNW etc) so it doesn’t skew the remaining 3 data sets (straighten them out). The Wind Compass data set is the standalone cardinal values (java script column) which you can see is returning 1 for all 24 sets.
Can you please outline how you were able to combine both sets (number and text) into the chart component so it displays both on hover.
Hey Kev, yeah totally get what you mean Glide’s native chart only reads numeric values for the dataset, so when you mix text (like ‘SSE’) it defaults to 1.
What I meant by combining both values is to keep the numeric column for plotting (e.g. Wind Speed) but create a template column that combines Wind Speed and the Cardinal value something like: Wind Speed: 12.4 knots (SSE)
Then you can use that column just for display text or hover info if you’re using a custom chart block (HTML/Chart.js). Unfortunately, the native Glide line chart won’t show both, it can only read the numeric value.
So if you need that combined hover text (‘12.4 Knots (SSE)’), you’d have to go the HTML + Chart.js route,
