victory#VictoryStack JavaScript Examples

The following examples show how to use victory#VictoryStack. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Graph.jsx    From covid-trials-dashboard with MIT License 6 votes vote down vote up 
Graph = () => {
  return (
    <div>
      <VictoryChart
        domainPadding={{ x: 50 }}
        width={500}
        height={500}
        theme={VictoryTheme.material}
      >
        <VictoryGroup
          horizontal
          offset={20}
          style={{ data: { width: 15 } }}
          colorScale={[sadBlue, magenta, yellow, tourquese, green]}
        >
          {/* Need to bing the label data to the VictoryLabel for each bar */}
          {vaccinesData.map((mockData, i) => (
            <VictoryStack key={i}>
              {mockData.map((data, index) => {
                return <VictoryBar key={index} data={data} />
              })}
            </VictoryStack>
          ))}
        </VictoryGroup>
      </VictoryChart>
    </div>
  )
}
Example #2
Source File: Charts.js    From ReactSourceCodeAnalyze with MIT License 4 votes vote down vote up 
render() {
    const streamData = this.props.data;
    return (
      <div>
        <div style={{display: 'flex'}}>
          <VictoryChart
            theme={VictoryTheme.material}
            width={400}
            height={400}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryScatter
              data={streamData[0]}
              size={6}
              style={{
                data: {
                  fill: d => colors[d.x % 5],
                },
              }}
            />
          </VictoryChart>

          <VictoryChart
            theme={VictoryTheme.material}
            width={400}
            height={400}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}
            domainPadding={[20, 20]}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryBar
              data={streamData[0]}
              style={{
                data: {
                  fill: d => colors[d.x % 5],
                  stroke: 'none',
                  padding: 5,
                },
              }}
            />
          </VictoryChart>
        </div>
        <div
          style={{
            display: 'flex',
            position: 'relative',
            top: '-50px',
          }}>
          <VictoryChart
            theme={VictoryTheme.material}
            width={800}
            height={350}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryStack>
              {streamData.map((data, i) => (
                <VictoryArea key={i} data={data} colorScale={colors} />
              ))}
            </VictoryStack>
          </VictoryChart>
        </div>
      </div>
    );
  }