Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Adam Grossman
    @adamgrossman
    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!
    boygirl
    @boygirl
    @Morasta I made you a little example that should help: https://codesandbox.io/s/vm7y8oj92l
    @here I apologize for being so absent from this channel. I am officially moving Victory's support channel to spectrum so that questions and answers will be more organized and persistent: https://spectrum.chat/victory
    This change coincides with on overdue docs update! Exciting things in the update: 1) documentation for changes in victory@32.0.0 (horizontal chart improvements) 2) a nicer docs sidebar experience for small screen sizes 3) It's all in react-static:tada:
    Nathan Carpenter
    @nathancarpenter03
    @boygirl or anyone else who might know, please help! I have a line and scatter chart that could potentially have up to 20 data points. However, I only want to show 5 of those labels (which are dates) on the x axis. How would i only display 5 max x axis labels? Here is my code:
    <VictoryChart theme={ VictoryTheme.material }>
        <VictoryAxis style={ { grid: { stroke: 'transparent' } } } />
        <VictoryAxis dependentAxis tickFormat={ (y) => Math.round(y) } 
            label={ chartLabel }
            style={ { ticks: { stroke: 'transparent' }, axis: { stroke: 'transparent' }, axisLabel: { padding: 25 } } }   />
          <VictoryLine data={ data }
              domain={ { y: [0, target] } }
               interpolation='linear'
               style={ {
                    data: { stroke: chartStroke },
                    parent: { border: '1px solid blue' }
               } } />
        <VictoryScatter style={ { data: { fill: chartFill } } }
              size={ 3 }
              data={ data } />
    </VictoryChart>
    Nathan Carpenter
    @nathancarpenter03
    Oops, i saw that you moved channels. Ill post there!
    Matt Viehdorfer
    @Morasta
    @nathancarpenter03 : check out the tickcount, etc. for VictoryAxis: https://formidable.com/open-source/victory/docs/victory-axis/#tickcount
    i've used that a bunch for Y axes, I'm betting it's the same for X
    rpelorosso
    @rpelorosso

    Hi! I have a stacked bar chart that have bars with negative values. I'd like to have the chart display a tick for the minimum value for the y range. In this case, it would be a tick at y=-6.

    Here's a codesandbox with a sample of it:

    https://codesandbox.io/s/o4r4kmx70q

    Is there a way to do it without having to pass an array of tick values?

    Also, you can see that the labels for the horizontal axis overlap the negative bars. Is it possible to move the labels for the horizontal axis to the bottom of the chart?
    boygirl
    @boygirl
    @rpelorosso would you mind repeating your questions in our new spectrum channel? https://spectrum.chat/victory
    rpelorosso
    @rpelorosso
    Thank you @boygirl , I just did.
    Garrett Dawson
    @killtheliterate
    sorry to ask if this is documented, but I am having trouble getting VictoryTooltip working with VictoryPolarAxis. If I provide VictoryTooltip as the labelComponent for a polar chart, the label just doesn’t render.
    axisLabelComponent rather
    Garrett Dawson
    @killtheliterate
    re-asked in spectrum
    Jon Jackson
    @TheRealJon
    Quick question about axis tick labels. Creating a horizontal bar chart which will have x-axis (vertical axis in this case) tick labels with arbitrary length strings. I need to account for the width of these tick labels so that I can adjust the chart padding. I want the tick labels to align with the left edge of the parent element without any of them overflowing.
    Does anyone know if there is a helper method, or combination of helper methods in victory that can give me a reliable measurement of the tickLabel group width?
    I can see in the DOM structure that all of the tick labels are wrapped in an svg <g> element, so there should be some way that I can get a measurement of that element, I just don't know the easiest way to do so.
    Jon Jackson
    @TheRealJon
    Alternatively, is there a prop that I can use to make victory automatically account for tick labels so that they don't overflow?
    Mike Kane
    @mikeKane
    Hi, I am using VictoryBoxPlot, and I need to draw multiple Box Plots. However they are all stacked on top of each other. How can we offset this? I tried using a Victory group but it did not work. Any suggestions?
    boygirl
    @boygirl
    @mikeKane we've moved our support chat to spectrum: https://spectrum.chat/victory