by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    aquacalc
    @aquacalc

    Problem: Imported custom component renders beyond the parent-chart's domain.

    Example: Live Preview of a custom <Polygon /> component in the [Victory docs] (https://formidable.com/open-source/victory/guides/custom-components/)

    When the <Polygon /> data are modified such that an x-value, e.g., is beyond the domain of the <VictoryChart /> within which <Polygon /> is wrapped, <Polygon /> renders beyond the chart area and into the padding.

    Same behavior of a custom component when the parent <VictoryChart />'s containerComponent is a <VictoryZoomContainer /> and the chart is zoomed-in sufficiently.

    Adding a groupComponent with a <VictoryClipContainer /> in <Polygon /> has no effect, regardless of the values of top, right...

    This doesn't happen with non-custom Victory components, like <VictoryArea />.

    Are there props -- beyond scale & style -- that should be passed into the custom component to resolve this behavior?

    Tom Ruys
    @Tomaroon
    Hi all! I am trying to style a React Native VictoryLabel within a VictoryScatter or VictoryArea labelComponent. I want to add some CSS styling (padding, backgroundColor, border, etc.). Whatever I try, I seem to only style things like fontSize and fill. Can someone help me out?
    Tom Ruys
    @Tomaroon
    Or, could I add an element to the VictoryLabel component and style that element?
    Dan Reeves
    @danreeves
    @boygirl my use case is something like let tickValues = getTickValues(data) so that I can figure out the length of the longest tick d3/victory is going to choose and add padding to the chart accordingly. Doesn't seem like something that's super easy, there's a lot of indirection under <VictoryChart>
    i ended up using a simpler, less accurate value
    Jennifer Vanderputten
    @JenniferVanderputten
    Good morning! I have a question about time series. I followed the brush-and-zoom example, and it worked for my line chart. However, for my VictoryGroup-ed bar chart, one of the dates was placed incorrectly (a July date was put at the end of the X axis, after November--and yet, another July date appeared where it should have!) Very odd. Is there something about the VictoryGroup that causes this?
    Jennifer Vanderputten
    @JenniferVanderputten
    FYI, I'm currently using my own indexing instead of time series, to work around this for now, but would like to know the proper solution, if it's possible.
    johnhydroware
    @johnhydroware
    @boygirl Did you see my quiestion about beeing able to detect clicks on custom dataComponent that wrapps a VictoryPie in a <g/> (to be able to set size) ?
    Nisha V Prasad
    @nishav11
    Hi, My question is about VictoryGroup component. When i have large amount of data the bar are being pushed beyond cross-axis, domain padding, domain etc nothing seems to help. Any work around for this ? Also how to control the space between individual grouped element ?
    Nisha V Prasad
    @nishav11
    Screen Shot 2019-02-05 at 3.50.43 PM.png
    above is the screenshot.
    Jaron Heard
    @jaronheard
    Does anyone have an example of a VictoryVoronoiContainer used to render a fixed position label? I can render fixed position VictoryTooltips that only work on data hover, or variable position labels with Voronoi functionality. Here's a version without the Vornoi functionality: http://civicplatform.org/cards/magnitude-of-urban-campsite-sweeps
    Alexander Schoonderwaldt
    @alexandersch
    @boygirl what is the status on this PR? FormidableLabs/victory#1204. Is it getting merged anytime soon. I actually need this functionality.
    Tim
    @Shin--
    Hi!
    How do you handle long label names on the X-Axis? I looked at the examples (https://formidable.com/open-source/victory/docs/faq/#my-axis-labels-are-cut-off-how-can-i-fix-them) but that only works for the Y-Axis https://i.imgur.com/F2aOiqe.png
    Tim
    @Shin--

    Ok, nvm

    <VictoryChart theme={VictoryTheme.material} domainPadding={20}
                        padding={{ left: 50, top: 40, right: 10, bottom: 200 }}>
            <VictoryAxis
              tickLabelComponent={<VictoryLabel style={{textAnchor:'end'}} angle={-75}/>}
            />
    </VictoryChart>

    did the trick

    Dan Stroud
    @dstroud
    I'm having trouble changing the color of an individual bar and I notice that the Live Preview for the relevant FAQ entry doesn't seem to work either: How can I change the color of an individual point or bar? Is this working as expected?
    gajendraprajapati
    @gajendraprajapati

    @boygirl

    > @gajendraprajapati VictoryChart uses a single domain for all its children, so to get multiple dependent axes with very different domains to work, you need to normalize and then rescale your data. You don't need to use tickValues for this, as the re-scaling is going on in the tickFormat. It might help to take a closer look at the example you link, especially the sections of the code dealing with normalizing and scaling the data. Also, that example can be edited in real time, so you can try changing the data and removing tickValues

    I tried that i am able to plot the chart but when i have negative data for one of my axis then it is breaking is there a way to solve this ? i am giving domain={{y:[0,1]}} and for negative values if i give anything else it will reflect on both axis i dont want that any solution for this ?

    ulsting
    @ulsting

    Hey everyone! I am trying to add tooltips to VictoryAreas which I have in a VictoryStack which itself is inside a VictoryChart. I have gotten the tooltips to "work" by getting rid of the VictoryChart and adding VictoryVoronoiContainer as the containerComponent to the VictoryStack (I say "work" because the tooltip doesn't always show for the VictoryArea that I am hovering over but sometimes shows for a nearby area).

    However, when I include the VictoryChart the tooltips no longer work. So I tried putting VictoryVoronoiContainer as the containerComponent on the VictoryChart as well. This also "worked", but the tooltips were super bugy - they took a long time to show and almost never went way.

    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.