[Feature Request] Infographics (Bar) Charts

[jrmoserbaltimore]

Many infographics display data as a context by images. This includes repeating, fractional images (pictograms), such as nine and 1/3 of a dollar bill to show $9,300; as well as images being filled, such as a dollar bill with 1/10 of its area colored yellow and 1/3 colored orange to demonstrate 10% of your income going to food and 30% going to housing.

Chart.js could fit these use cases, albeit with a significant additional feature using considerable code. This is not a trivial request; only an interesting one.

Some suggestions on form:

• For pictograms, allow the user to supply an image for each bar; whether they can make multiple stacks; how many stacks they make; and if they shrink when making multiple horizontal stacks
• For representative graphics, allow the user to select an image and mask (second image) showing where in the image to fill with color (e.g. black in the second image is the fill region)
• Allow biregional masks, e.g. black and blue, where the blue region is ignored if filled with "cut-through"
• Allow the user to specify if the image fills horizontally or vertically
• Allow the user to specify from which end the image fills
• The furthest pixels in the mask region mark the beginning and end (e.g., 1% and 100% for a 100px-wide region)
• Allow the user to specify opacity for the fill

In this way, a user could provide, e.g., a dollar bill, and a silhouette of the same dimensions as a mask. The details on the dollar bill image would be represented in blue on the silhouette. When filling with "cut-through", the blue area won't get colored by the graph; otherwise the blue area is treated as part of the mask (i.e. as if it were black).

Combining several images can allow the representation of different things, such as various types of taxes collected from paychecks, payroll, and corporate income; or the various proportional 5-year costs (purchase, fuel, maintenance) of different vehicles.

For the most part, this is just a fancy bar chart; it's a lot of new, complex logic to represent a bar chart, though.

[etimberg]

@bluefoxicy you may be able to achieve some of this already using the CanvasGradient. You could create the gradient with your image and set that as the background color of the dataset and Chart.js will support that. The hover styling could be done in a similar way by creating a hover gradient that is applied as the hover background style.

The downside of that approach is that you won't get any special resize behaviour or anything. That will likely require a Chart.js plugin that runs on resize to recreate the gradients at the appropriate dimensions.

Do you have an image of a specific chart you'd like to create?

[jrmoserbaltimore]

Not as such. I was sketching out some stuff on paper so I have this, where the icons (top to bottom) represent paycheck, payroll, and corporate profits, and the shaded areas (at the right side of the graphics—not the door on the corporate profits icon) represent income taxes (down-left diagonal thatching), OASDI taxes (solid black), HI (the slim white area in the payroll icon), and benefits costs (down-right diagonal thatching).

In that example, had I expanded into the $ on the payroll icon, I'd have not drawn any lines or done any filling over the $ part of the graphic. The description I gave suggests the user would accomplish this by providing an image for the payroll icon (e.g. a gold $ coin) and a mask where the $ area is masked in blue, allowing him to either cover over it all (the blue area fills) or to not cover over the $ in the graphic (the blue area does not fill).

Most of the time people do this crudely or use pictographs.

I'd imagine, based on what I described, that the source graphic and mask would need to be SVG for up-scaling, whereas a large PNG image can down-scale easily.

Like I said: this is non-trivial and not necessarily high priority. I don't believe any tools exist to do this well, and especially not e.g. to animate changes between states in the chart, so it seemed worth suggesting. If people think it's a decent idea or somebody thinks it'd be interesting to implement, I'm sure they'll speak up. I do believe that representing data in a more relatable way—showing things you want to represent, rather than bars labeled as those things—would produce higher-quality charts in many situations. This is why pictographs and other fancy representations are so popular in modern infographics.

[etimberg]

Added a sample file showing how to use gradients as fill in #6666 which covers this use case