Closed gilesdring closed 11 months ago
@gilesdring I'm not sure what you mean by a default background image. Do you have an example?
The specific use case is here: https://open-innovations.github.io/jrf-insight/spotlight/economic_insecurity/E12000003/
I am providing a percentage for one series (0 to 100), which I can successfully style as seen above. There doesn't seem to be any way of styling the grey squares (i.e. the remainder) aside from globally changing the chart background colour. I assume that this would change the background for any other charts as well.
What I'm imagining is that for a waffle chart I am able to optionally provide a colour / icon for the 'remainder' series, which would then be used for any squares which were just padding.
As a workaround for this I did try creating a series which showed 100-x (i.e. the remainder), but ran into difficulties with rounding, IIRC - it was relatively late, so I may have been making dumb errors.
@gilesdring Yes, you are correct that setting the default background for the whole site will change other charts. I'm working on doing what you want. If the final item in the series
array doesn't have a value
set, it'll use that as the defaults for the empty/remainder grid items.
That seems like a great solution - thanks @slowe!
I think the new example 14 does what you want. The last series
item (the second, in this case) has no value
set. But you can set the title
, colour
, tooltip
, and points
just as you would the other series. Things to note:
series:
- value: universal credit
title: Universal Credit
colour: '#ce0058'
tooltip: uc tooltip
points:
marker:
svg: >-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16
16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0
0-6 3 3 0 0 0 0 6Z"/></svg>
- title: Unknown
colour: '#bbbbbb'
points:
marker:
svg: >-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16
16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0
0-6 3 3 0 0 0 0 6Z"/></svg>
A slightly nicer example where I've made use of the outline version of that icon.
Looks brilliant - I'll see if I can get it integrated now.
It's sometimes useful to be able to provide a default background image, rather than having to artificially put in a second series. Ideally this would reuse the standard 'series' way of defining colour, etc.