by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Grzegorz Kaliciak
    @qvist
    Hi guys,
    I would like to build a baseline chart, similar to this one
    Do you think that’s easily achievable? Are there any examples I could follow?
    ulsting
    @ulsting
    Could someone give me an example of VictoryPortal being used with VictoryTooltip?
    Omorhefere
    @omorhefere
    Anyone here have any issues with victoryScatter not showing the last element in the array that was passed to it?
    Alexander Mattoni
    @mattoni
    @boygirl I have a voronoi container with a tooltip + multiple points. It looks like the tooltip is not moving outside the dimensions of the chart. Is there a way to make it so the tooltip can leave the boundaries of the chart?
    Alexander Mattoni
    @mattoni
    @boygirl one other question, how can I get a line SEGMENT to render the x value based on a date?
    its asking for a number
    Nathan Carpenter
    @nathancarpenter03

    Hi! I have a chart that pulls in data, which consists of a date with a corresponding score. Is there a setting to make it so that when there are more than 5 dates/scores, only display 5 and space them apart equally as the data set grows?

    Here is my code

    import React from 'react';
    import Immutable from 'immutable';
    import moment from 'moment';
    
    // components:
    import { ActivityIndicator, View } from 'react-native';
    import { VictoryAxis, VictoryScatter, VictoryChart, VictoryTheme } from 'victory-native';
    
    function chartData(progressData) {
      const data = [];
    
      progressData.map((item) => {
        data.push({ x: item.date, y: item.score });
      });
      return data;
    }
    
    const Chart = (props) => {
      const { progressData } = props;
      const loading = progressData.get('loading');
      const items = progressData.getIn(['data', 'items']) || Immutable.List();
      const data = chartData(items.toJS());
      const target = progressData.getIn(['data', 'target']);
    
      let chart = <View />;
    
      if (loading) {
        chart = <ActivityIndicator />;
      } else if (data.length > 1) {
        chart = (
          <View>
            <View>
              <VictoryChart theme={ VictoryTheme.material }>
                <VictoryAxis label='Date'/>
                <VictoryAxis label='Progress' dependentAxis tickFormat={ (y) => Math.round(y) } />
                <VictoryScatter size={ 3 } data={ data } />
              </VictoryChart>
            </View>
          </View>
        );
      }
    
      return chart;
    };
    
    export default Chart;
    Monica Devi
    @depimomo_twitter
    Hello! I'm trying to export my victory chart as picture to load in my pdf but didn't find the option to do that. Does anyone know how to do that? Thanks in advance!
    satyasinha94
    @satyasinha94
    Anyone know how to keep your scatter plot points from clustering together? Some of my bubbles keep ending up overlapping despite me randomizing the index. Code attached: <React.Fragment> <Grid> <Grid.Row columns={2}> <Grid.Column> <VictoryGroup> <VictoryScatter style={{ data: { fill: "#c43a31" }, labels: {fontSize: 6} } } bubbleProperty="popularity" maxBubbleSize={13.5} minBubbleSize={5} data={this.state.mappedArtists.map((artist, index) => { return {x: index + 900 , y:Math.random(0,100), popularity: artist.popularity}}) } labels={this.state.mappedArtists.map(artist =>${artist.attributes.name}
    Popularity: ${artist.popularity})} labelComponent={<VictoryLabel dy={-10}/>} /> </VictoryGroup> </Grid.Column> <Grid.Column> <VictoryScatter style={{ data: { fill: "blue" }, labels: {fontSize: 6} } } size={13} data={this.props.artist_recommendations.map((track, index) => { return {x: index + 900 , y:Math.random(0,100) , name: track.name}}) } labels={this.props.artist_recommendations.map(track => track.attributes.name)} labelComponent={<VictoryLabel dy={-10}/>} /> </Grid.Column> </Grid.Row> <Grid.Column> <VictoryLegend/> </Grid.Column> </Grid> </React.Fragment>
      <React.Fragment>
            <Grid>
                <Grid.Row columns={2}>
                  <Grid.Column>
                  <VictoryGroup>
                    <VictoryScatter
                    style={{
                      data: { fill: "#c43a31" },
                      labels: {fontSize: 6} }
                    }
                    bubbleProperty="popularity"
                    maxBubbleSize={13.5}
                    minBubbleSize={5}
                    data={this.state.mappedArtists.map((artist, index) => {
                      return {x: index + 900 , y:Math.random(0,100), popularity: artist.popularity}})
                    }
                    labels={this.state.mappedArtists.map(artist => `${artist.attributes.name}
                      Popularity: ${artist.popularity}`)}
                    labelComponent={<VictoryLabel dy={-10}/>}
                      />
                    </VictoryGroup>
                      </Grid.Column>
                      <Grid.Column>
                      <VictoryScatter
                      style={{
                        data: { fill: "blue" },
                        labels: {fontSize: 6} }
                      }
                      size={13}
                      data={this.props.artist_recommendations.map((track, index) => {
                        return {x: index + 900 , y:Math.random(0,100) , name: track.name}})
                      }
                      labels={this.props.artist_recommendations.map(track => track.attributes.name)}
                      labelComponent={<VictoryLabel dy={-10}/>}
                      />
                  </Grid.Column>
                </Grid.Row>
                <Grid.Column>
                  <VictoryLegend/>
                </Grid.Column>
              </Grid>
            </React.Fragment>
    qasimkhan13
    @qasimkhan13
    Hi, I am new in victory charts, please someone share example of victory bar chart, m getting this problem in my bar chart, the data m using for graph has no limit and I have to show the date in the x axis e.g YY-MM-DD , but when the graph is shown the x axis values are merged
    and also the graph is overflowed
    qasimkhan13
    @qasimkhan13
    @boygirl
    tl
    @boredsleepwalkr_twitter
    @boygirl I am encountering the problem of the user being unable to scroll on mobile if they are touching anywhere in the chart container. The chart contains tooltips (rendered outside of VictoryCharts) so it needs to listen to mouseover, mouseout, and click events. Is there a way to get scrolling to work? I am not using React Native.
    tl
    @boredsleepwalkr_twitter
    @boygirl it also looks like an android issue as I am able to scroll on iphones
    Jordan Pettycoat
    @NaCl4Ever
    Hi have been creating some prototype charts using the tool in React + Typescript. Ran into a weird issue with VictoryLegend, when I set the x and y vals. The y value seems to take and properly place the legend along the corresponding y value of the y axis, but the x value doesn't seem to get set. Instead I am met with Received NaN for thexattribute. If this is expected, cast the value to a string.
    Not sure if anyone has seen anything like that before.
    Adam Grossman
    @adamgrossman
    Hello. I was hoping someone could take a look at this issue that was opened a while back - FormidableLabs/victory#1041
    I didn't open it but I'm trying to do the same thing
    Is it possible to add background color to a chart in only particular sections?
    johnhydroware
    @johnhydroware
    How can I detect de differens between a click and drag and a pure click? "onClick" seems to be called on any release of the mouse button
    johnhydroware
    @johnhydroware
    And how can I add an handler defining "onMouseDown" and do what i want and then call the handler that would be called if i hadn't done anything?
    Omorhefere
    @omorhefere
    Hey , does anyone have any advice about how to stop victory native from interpolating VictoryLines? I'm trying to get a chart to to not show the gaps between readings. I just want it to skip missing timestamps
    johnhydroware
    @johnhydroware
    @omorhefere I will need to do that myself soon. Haven't tried it yet though, but my attempt would be to add a dummy "null" value at both ends inspired by this https://formidable.com/open-source/victory/gallery/victory-line-null-data/
    johnhydroware
    @johnhydroware
    When zooming to much the graph suddenly jumps to the start of the domain. Have anyone else noticed this also?
    This happens in the examples on the Victory site also. This seems like a quite bad bug?
    johnhydroware
    @johnhydroware
    I'm using chrome. It seems to work a bit better in Firefox, but still a bit strange
    Omorhefere
    @omorhefere
    @johnhydroware Hi John, thank you for the link, its help me understand VictoryLine a bit more. What I want to the is actually the opposite of that . I want the chart to fast forword to the next timestamp which is a bit away.
    johnhydroware
    @johnhydroware
    @omorhefere Like a broken axis? The only way I can think of would be to use "fake values" for X and set your own "tickValues" that are shown. But I might be way off. Never needed it myself, and it might be confusing for the user.
    DarthVader
    @Wars13
    how to server-side render Victory components?
    satyasinha94
    @satyasinha94
    Is it possible to render images as datacomponents?
    Morgan
    @Five-Cents
    Does anybody know how to change the font size and/or angle of x-axis labels in VictoryGroup?
    image.png

    Code is currently structured like this:

    <VictoryChart>
    <VictoryGroup>
    <VictoryBar(s)/>
    </VictoryGroup>
    </VictoryChart>

    YounesseOutarahout
    @YounesseOutarahout
    Hi
    Can you help me?
    I need yours help.
    <VictoryChart height={160} padding={{top: 50, bottom: 0, left: 10, right: 10}} >
    <Defs>
    <LinearGradient id="gradientStroke" x1="0%" x2="0%" y1="0%" y2="100%" >
    <Stop offset="0%" stopColor="#6344D3" stopOpacity="0.5" />
    <Stop offset="100%" stopColor="#6344D3" stopOpacity="0" />
    </LinearGradient>
    </Defs>
    <VictoryGroup>

    <VictoryArea style={{ data: { fill: "url(#gradientStroke)", strokeWidth: 2, stroke: '#6344D3' }}} labels={(datum) => datum.y}
    labelComponent={<VictoryTooltip/>}

    data={data}
    />
    <VictoryScatter style={{ data: { fill: "#6344D3" } }} size={2} labels={(d) => d.y}
    labelComponent={<VictoryTooltip/>}

    events={[{
    target: "data",
    eventHandlers: {
    onPress: (d) => {
    alert(d.y);
    return [
    {
    target: "data",
    mutation: (props) => {
    const fill = props.style && props.style.fill;
    return fill === "black" ? null : { style: { fill: "black" } };
    }
    }, {
    target: "labels",
    mutation: (props) => {
    return props.text === "clicked" ?
    null : { text: "clicked" };
    }
    }
    ];
    }
    }
    }]}
    data={data}
    />
    </VictoryGroup>
    </VictoryChart>
    this is my code.
    Then The event is not working.
    Please tech me solve the problem.
    johnhydroware
    @johnhydroware
    How do I make victory use 24h time for labels? I like the automatic generation of ticks, but would like it in 24h-format.
    Matt Viehdorfer
    @Morasta

    Does anyone have any ideas how I might make VictoryVoronoiContainer hover details persist on a user click event? (https://formidable.com/open-source/victory/docs/victory-voronoi-container/)

    Specifically, if a user clicked while a given popup was active, using VoronoiDimension='x' in this case, that the hover popup would remain visible as they navigate the line so they can compare values.

    Matt Viehdorfer
    @Morasta
    @Five-Cents : I know you can do that by adding VictoryAxis and the angle prop for axisLabelComponent (https://formidable.com/open-source/victory/docs/victory-axis/#axislabelcomponent)
    Patrícia Barros
    @apatriciaab_twitter
    Hi! Does anyone have an idea of how you would add a visual indicator (e.g. a line) of where your mouse is, using a VictoryVoronoiContainer?
    Matt Viehdorfer
    @Morasta
    followup SO post for my question about persistent tooltips for voronoicontainers with some more detail: https://stackoverflow.com/questions/55248362/persistent-victory-charts-victoryvoronoicontainer-tooltips-on-click
    Patrícia Barros
    @apatriciaab_twitter
    @Morasta thanks!