Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- In my App.js' render, I have a line like this. Sample data is defined in apps default state:
- <Grid item xs style={{height:200 + 'px'}}>
- <JobQueueChart data={this.state.jobCountTimeline}></JobQueueChart>
- </Grid>
- The that component is:
- import React from 'react';
- import { ResponsiveBar } from '@nivo/bar'
- const JobQueueChart = ({ data /* see data tab */ }) => (
- <ResponsiveBar
- data={data}
- keys={[ 'hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut' ]}
- indexBy="country"
- margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
- padding={0.3}
- colors={{ scheme: 'nivo' }}
- defs={[
- {
- id: 'dots',
- type: 'patternDots',
- background: 'inherit',
- color: '#38bcb2',
- size: 4,
- padding: 1,
- stagger: true
- },
- {
- id: 'lines',
- type: 'patternLines',
- background: 'inherit',
- color: '#eed312',
- rotation: -45,
- lineWidth: 6,
- spacing: 10
- }
- ]}
- fill={[
- {
- match: {
- id: 'fries'
- },
- id: 'dots'
- },
- {
- match: {
- id: 'sandwich'
- },
- id: 'lines'
- }
- ]}
- borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
- axisTop={null}
- axisRight={null}
- axisBottom={{
- tickSize: 5,
- tickPadding: 5,
- tickRotation: 0,
- legend: 'country',
- legendPosition: 'middle',
- legendOffset: 32
- }}
- axisLeft={{
- tickSize: 5,
- tickPadding: 5,
- tickRotation: 0,
- legend: 'food',
- legendPosition: 'middle',
- legendOffset: -40
- }}
- labelSkipWidth={12}
- labelSkipHeight={12}
- labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
- legends={[
- {
- dataFrom: 'keys',
- anchor: 'bottom-right',
- direction: 'column',
- justify: false,
- translateX: 120,
- translateY: 0,
- itemsSpacing: 2,
- itemWidth: 100,
- itemHeight: 20,
- itemDirection: 'left-to-right',
- itemOpacity: 0.85,
- symbolSize: 20,
- effects: [
- {
- on: 'hover',
- style: {
- itemOpacity: 1
- }
- }
- ]
- }
- ]}
- animate={true}
- motionStiffness={90}
- motionDamping={15}
- />
- )
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement