render() { const { courses } = this.state; if (courses.length === 0) return null; return ( <Paper style={{ height: 'fit-content', margin: 'auto' }} depth={1}> <VictoryLabel text="My Courses" x={225} y={30} textAnchor="middle" style={{ fontSize: 25 }} /> <VictoryPie data={courses} labelRadius={130} theme={VictoryTheme.material} x="subject" y="count" colorScale={colours} /> </Paper> ); }
renderSVG(progress) { return ( <svg className="progress" viewBox="0 0 400 400" width="100%" height="100%"> <VictoryPie standalone={false} animate={{ duration: 1000 }} labels={() => null} /> <VictoryAnimation duration={1000} data={this.state}> {newProps => ( <VictoryLabel className="progress__text" textAnchor="middle" x={200} y={200} text={Math.round(newProps.progress)} style={{ fill: '#fff',
<VictoryChart domainPadding={30}> <VictoryLabel text="Popular Courses" x={225} style={{ fontSize: 25 }} /> <VictoryAxis label="Courses" style={{ }} /> <VictoryAxis dependentAxis label="# of Users" }} /> <VictoryBar data={popular} sortKey="count" style={{ data: { fill: (c) => c.colour, stroke: '#76787f', strokeWidth: 1,