Line Chart

Description: User Story

As a user, I should be able to see a line graph as part of a Result.

**[Zeplin Link](**

– Chart Title: Summary Historical Results
– Legend with series labels
– labels should matching the color of the line
– clicking on the labels should toggle the series line on and off and lower opacity of the legend label to 25% when in the off position
– Y-axis shows result scores
– min label = min result score
– max label = max result score
– X-axis shows dates
– min label: oldest date
– max label: most recent date
– dates should be equally distributed across x axis (large gaps in time should not display as large gaps in x-axis)
– Plot data points
– Connect the dots with lines the same color as the series label
– The graph should load showing the last 7 data points
– Minimum zoom should be 7 data points
– Maximum zoom should be 2 data points
– User can swipe left and right to scroll through the graph if it doesn’t fit in one view
– User can pinch to zoom horizontally
– Tapping on a data point should show a label with:
– Series title
– Score
– Date


Web Code – For reference

Complex charting in here and also some additional data fetching for historical scores