Right now I’m working on Guest, a guest list management app. Our main front-end stack is React and Redux. One of our team goals this month is to implement new check-in statistics feature. It’s a brand new view to visualize the check-in data of our guests, including radial bar charts and line charts. The first thing we need to address is to decide which library we should use to build the charts. d3 is our first choice but charting directly with d3 can be difficult while other libraries are often too simplistic.

Based on our research of chart library built with React and d3, we found two ideal candidates, Victory and Rechart. They both use the declarative approach of React/JSX. It’s a natural fit for our stack since we only need to feed the chart components some props. We compared them based on six different criteria: needs coverage, customizable, animation, responsive, mobile support and well-documented. Finally, we decided to use Victory. There are two main reasons. One is that Victory supports React Native, which makes it very easy for us to reuse the code in our mobile app. Another reason is that it’s more customizable. Using a chart component library can be frustrating sometimes. Like any framework which gives you high-level abstractions, there will come a point when your needs will become very specific and won’t fit in. Victory provides components like VictoryAxis, VictoryBar, VictoryLine … It covers all our needs.

Some code you may find useful (code review is very welcome, please leave a comment if you have any suggestions):

//radial bar chart
const colors = {
   pink: ["#CB5599", "#5E6063"],
   teal: ["#49C6B7", "#5E6063"]
};

<VictoryPie
  data={data}
  x="guest"
  y={(datum) => datum.value}
  style={{
   labels: {fontSize: 0}
  }}
  colorScale={colors[color]}
  innerRadius={115}
/>

//line chart
<VictoryChart>
   {
      data.length > 1 ? <VictoryLine
         data={data}
         x="time"
         style={{
            data: {stroke: colors[color], strokeWidth:4},
         }}
         y={(datum) => datum.value}
      /> : null
   }
   <VictoryAxis
      // x
      tickValues={xRange.length > 1 ? xRange : ["8:00 PM"]}
      tickFormat={(tick) => {
         if (data.length < 1){
            return tick;
         }
         const time = data[tick-1].time.split(":");
         return formatTime(time);
      }}
      style={{
         axis: {stroke: colors.mediumGray},
         ticks: {stroke: colors.mediumGray},
         tickLabels: {fontSize: 12, padding: 30, stroke:"#EAEDEF"}
      }}
   />
   <VictoryAxis
      // y
      dependentAxis
      tickValues={yRange.length > 1 ? yRange : [0, 3, 6]}
      style={{
         axis: {stroke: "none"},
         grid: {stroke:colors.mediumGray},
         tickLabels: {fontSize: 12, padding: 30,   stroke:colors.lightGray}
      }}
   />
   <VictoryScatter
      data={data}
      x="time"
      style={{
         data: {stroke: colors.lightGray, strokeWidth:3, fill:colors.lightGray},
         labels: {fontSize: 30},
      }}
      y={(datum) => datum.value}
   />
   <VictoryVoronoiTooltip
      data={data}
      labels={(datum) => datum.value}
      y={(datum) => datum.value}
      x="time"
      style={{
         labels: {
            fill: "white"
         },
         flyout: {
            fill: colors.mediumGray,
            strokeWidth: 0
         }
      }}
   />
</VictoryChart>

Overall, it has been a great journey using Victory. The check-in stats view was finished in short amount of time and the result is amazing. Although it took me some time to find information from the library documentation, you can always ask questions through Gitter.

My Victory Journey was originally published in Social Tables Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.