Stacked Histogram

const groupedData = _.groupBy(listeningData, ({ genre }) => genre);

const sharedAxisStyles = {
  tickLabels: {
    fontSize: 13
  },
  axisLabel: {
    padding: 39,
    fontSize: 13,
    fontStyle: "italic"
  }
};

const App = () => {
  return (
    <VictoryChart
      height={450}
      scale={{ x: "time" }}
      containerComponent={
        <VictoryVoronoiContainer
          style={{}}
          labels={({ datum }) =>
            datum.y > 0 ? `${datum.y} ${datum.binnedData[0].genre} songs` : null
          }
        />
      }
    >
      <VictoryLabel
        x={225}
        y={25}
        textAnchor="middle"
        text="Songs listened to in 2020"
      />

      <VictoryStack
        colorScale={[
          "#003f5c",
          "#2f4b7c",
          "#665191",
          "#a05195",
          "#d45087",
          "#f95d6a",
          "#ff7c43",
          "#ffa600"
        ]}
      >
        {Object.entries(groupedData).map(([key, dataGroup]) => {
          return (
            <VictoryHistogram
              data={dataGroup}
              key={key}
              x="day"
              binSpacing={8}
              style={{
                data: { strokeWidth: 0 }
              }}
            />
          );
        })}
      </VictoryStack>

      <VictoryAxis
        tickCount={12}
        tickFormat={date => date.toLocaleString("default", { month: "short" })}
        style={sharedAxisStyles}
      />

      <VictoryAxis
        dependentAxis
        label="Total # of Songs"
        style={sharedAxisStyles}
      />
    </VictoryChart>
  );
};

render(<App/>);