Visualisation project - expert quote request

Ask for Help
1

Hi
I’ve been building an app for members of a paragliding club. One of the bits of info I’d like is current wind direction on a ‘wind rose’ which is a 360 degree plot with wind direction shown as an arrow, site locations marked as arcs which are then green if the wind is in the right direction for a site.

IMG_3669
IMG_36691170×2532 179 KB

I have this version which is created from weather data imported into google sheets and a chart created in quick chart. But the data is static.

I’d like to extend this by creating a long list of sites and wind directions which are displayed on the rose. There are too many to display at once (c300) so The user could then select which sites they wanted. A basic version could show for a region captured as a column on the site list. Or enter a location and show all sites within 100’miles say.

I’m looking to engage an expert to do this (paid project). I suspect this would need to have data stored in glide and visualised outside of glide which takes it outside my ability.

Any suggestions appreciated and / or approaches combined with proposals (PM I guess)

2

Can you share a sample data structure? Do we have each site and wind direction as a combination for a row? Does each region hold multiple sites?

3

Thanks for the reply. Data structure would be:

  • unique site name (text). Eg “Combe Gibbett”
  • Location (text) location as lat/long or alternative if easier eg “ (51.5450571, -0.3673473)”
  • Region (text validated from another list) eg “North West”
  • Wind Range the range of wind directions which makes the site flyable on a 360 degree compass face (text/number - currently I have as text eg “210-300” but probably easier to capture as two number columns)

Worth noting whilst doing this that a particular irritation is if a site runs through north. So a site which is mostly east facing might be 70-110 but a north facing site is 340-20. (This is why the north facing site in my example is broken into two)

4

image
image2016×1512 985 KB

Excuse the rather crappy image, best I can do at work but hopefully serves!

5

I don’t see the Region there. Is that the Category field?

6

Sorry, yes exactly

7

So when the user chooses a Region from a choice component, you want to show, in a single chart, the wind data from locations related to that region?

1 Like
8

MVP - exactly as you describe
Subsequent development - all sites within a defined distance from the user (calc from lat/long)

Also MVP - highlight the sites for which the wind is currently within range

To do this I currently import
The table here

Into google sheets and then to glide

9

Can you explain how you build the quickchart url? I’m imagining a a relation, and maybe a lookup or joined list that pulls everything together into a template column to build your url, but I don’t really have a full picture of how you are putting it all together currently so it’s hard to advise.

1 Like
10

Sure…although I’,m not sure I’d do it this way again! :slight_smile: and this way is definately not adaptable to solve the problem above - it’s already at the limit of what Quickchart can process.

I have an external data source which is pulled into google sheets
The google sheet converts the table into a 4 ranges for quickcharts. 2 of these (the site rose rings) are static and represent the sites.
The coloring of the sites is based on a dynamic range which updates as the imported data updates
I then import all of this into google sheets and then concatenate in glide to form the quickchart url
Tortuous, but it works

view only spreadsheet here.

the tab called RASP is the one imported to glide

I suspect that there is a much easier way to do this!!

here is a good example of what I’d like to achieve (although like my hack job this one is also a fixed set of sites)

11

Does Quickchart have a chart type to support this? I wonder if using Chart.js would solve your problem. Data-wise, I also think the same way as Jeff described. It’s just a matter of how to construct a code snippet to display it in a web embed component.

12

the quickchart pie chart does what I showed above but constructing it quickly becomes very complex and there are so many data points. This is the quickchart code before I convert to the url

"{
  type: 'pie',
  data: {
    datasets: [
          {
            labels: ['N➡️', '⬅️','', '', '', '', '', '', '', 'NE', '', '', '', '', '', '', '', '', 'E➡️', '', '', '', '', '', '', '', '', 'SE', '', '', '', '', '', '', '', '', 'S⬅️️', '', '', '', '', '', '', '', '', 'SW', '', '', '', '', '', '', '', '', '⬅️️W', '', '', '', '', '', '', '', '', 'NW', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ],
            data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 1,
            borderColor: 'white',
          },
          {
            label:'Ring 1',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'MHWH', 'Rybury', '', 'Combe Gibbet', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ],
            data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 160, 70, 60, 20, 50, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
            backgroundColor:['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
          {
            label:'Ring 2',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Tan Hill', 'Milk Hill', '', 'Uffington WH', '', '', '', '', '', '', '', '', '', '', '', '', ],
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 100, 60, 90, 45, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
          {
            label:'Ring 3',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Golden Ball', '', 'Liddington', '', 'Liddington', '', '', '', '', '', '', ],
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 135, 65, 20, 10, 50, 40, 40, 0, 0, 0, 0, 0, ],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
          {
            label:'Ring 4',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Sugar', '', 'White Hill', '', ],
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 20, 60, 10, 70, ],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
        ],
      },
  options: {
    rotation: (-0.5 * Math.PI)-((2*Math.PI) / 360)*2.5,
    cutoutPercentage: 20,
    plugins: {
      doughnutlabel: {
        labels: [
          {
            text: '🍃',
            color: 'black',
            textAlign: 'center',
            font: {
              size: 150,
              weight: 'regular',
            },
          },
        ],
      },
      datalabels: {
        formatter: (val, ctx) => {
          const label =
            ctx.chart.data.datasets[ctx.datasetIndex].labels[ctx.dataIndex];
          return `${label}`;
        },
        color: function(context) {
              var index = context.dataIndex;
              var label = context.dataset.labels[index];
              return index < 72 ? 'white' :
                  'black';
        },
        rotation: [-90,-85,-80,-75,-70,-65,-60,-55,-50,-45,-40,-35,-30,-25,-20,-15,-10,-5,0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,-90,95,100,105,110,115,120,125,130,-45,140,145,150,155,160,165,170,175,0,185,190,195,200,205,210,215,220,45,230,235,240,245,250,255,260,265,-105,10,75,295,330,5,-115,-35,40,287.5,332.5,-117.5,-17.5,205,40,250,295,335,-85,25,245,280,320,],
        font: {
          size: 22,
        },
      },
    },
  },
}"

I’m not familar with chartjs to know if it could provide a solution