Contact 311 chart visual issues

[jmensch1]

Description

There are a few issues with the Contact 311 chart:

• the labels overlap in cases where the individual sections are small
• the longer labels sometimes run off the edge of the screen (like "Mobile App" below). It would take a lot of padding to avoid that for the longest labels ("Driver Self Report").

In addition to these visual issues, there are a bunch of request sources that are not identified in the wireframes, and so they don't have colors assigned. Here's a full list of the requests sources that are in the DB from 2019-2020.

I'm not sure whether we want to display all of these request sources, or just stick with the ones in the wireframes. But obviously if we do display all of them there would be more potential for overlap between the labels.

Potential fix

It might help to use a legend specifically for this chart. I'll see what our chart package can do about adding a legend.

[jmensch1]

Hey guys, after I wrote this ticket I thought of a simple way to do this. It wouldn't involve any change to the layout or adding a legend.

Basically we'd group together all the requests that have very small numbers (like less than 1%) and put them in a catchall category called "Other" instead of displaying them individually. So the chart would look like this:

That would make it unlikely that there would be overlap between the labels.

And as for the labels running off on the side, I could make abbreviations for the longer ones, like DSR for Driver Self Report, MA for Mobile App. And then inside the hoverover tooltip I could put the full name.

Does that sound okay? thanks

[itsjoycelee]

That works, Jake.
For overlapped text, would it be possible to use lines that help the text not be in the vicinity of each slice (see below image example)?

@yuenyilam is also designing alternative views for the pie chart for the next iterations as well.

[jmensch1]

Hi Joyce,

I looked at the docs for our chart package, and unfortunately they don't offer any way to add lines like that, or move labels out of the way of each other. But they do have an option to hide a label if it overlaps another label. And it's also possible to control how far away the label is from the edge of the pie.

[yuenyilam]