Bar Graph - How to Display Based on Non-Numerical Data

[OsBurman]

I'm trying to make a graph that displays data accordingly. The x-axis is the week itself, and the y-axis is every day of the week. But instead of a numerical value for each day of the week, it only displays whether or not the tasks are complete. Each box/value is the same size, but it should be colored either blue for complete or gray for incomplete. Is that possible or does there need to be a numerical value? And if it is a numerical value, how do I get the color to differentiate?

I tried using data like the one below to make same size blocks but this doesn't take into account whether or not the task for the day is complete:

Is it possible to have the day of the week data be an object instead and display the data via nested values?

{
id: '03/03',
"Monday": 1,
"Tuesday": 1,
"Wednesday": 1,
"Thursday": 1,
"Friday": 1,
"Saturday": 1,
},
{
  id: '03/10',
  "Monday": 1,
  "Tuesday": 1,
  "Wednesday": 1,
  "Thursday": 1,
  "Friday": 1,
  "Saturday": 1,
  },

[tkonopka]

The title for this question mentions bar graphs. In that context, achieving this effect is possible, but it would be tricky. Nivo's Calendar or TimeRange components may be more suitable. The HeatMap could be also be relevant, especially if the data is already partitioned into days of the week and if the viz needs the show weeks with six days as opposed to seven. HTH.

[OsBurman]

Thank you. I'm trying to get the exact same look - not sure if Calendar or TimeRange would allow me to do that. Can I ask what the trickier version for the bar graph is, or how you would structure the data?

[tkonopka]

HeatMap can get you quite close to the screenshot look. Use props xOuterPadding and xInnerPadding to make the heat map grid appear like vertical bars. The color scheme could have type quantize with two steps. You might need to create a custom legend.

In comparison, using Bar would be more complicated. The data could have 12 keys 'Monday_complete', 'Monday_incomplete', etc. and the values would be 0/1. It would be your responsibility to ensure that values for each week add up to the same number. A stacked bar graph would then look like the screenshot. You'd have to do custom tick marks for the axes and ensure that the bar order (within each stack) matches your axes. The color scheme would technically have 12 colors, and you'd have to set the colors manually to make it appear as if there are only two. All this is error prone, so HeatMap would be more appropriate IMO.

[plouc]

I agree with @tkonopka, I don't think that the bar chart is the best option for this.

[OsBurman]

Thanks a lot guys! One more question - I was able to use your advice and give the days numerical values. The one thing I'm struggling with - with the ticks, I tried giving tickvalues of [1,2,3,4,5,6] for the axistTop, but as you can see, all of the values on top overlapped each other. I'm trying to get those values above each bar - whats the best way of doing this?

[tkonopka]

Not sure what is happening with the overlaps there, but using axisTop seems a good approach. First, set up the axis to mirror the bottom one - to get the positions correct over each column. Then set up a format function to ignore the default labels (i.e. "01/30" etc in your screenshot) and display something else instead. HTH.