Is it possible to add background color to a chart in only particular sections?
@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/
This happens in the examples on the Victory site also. This seems like a quite bad bug?
Code is currently structured like this:
<VictoryChart>
<VictoryGroup>
<VictoryBar(s)/>
</VictoryGroup>
</VictoryChart>
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>
<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.
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.
@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)
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
@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:
@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>
@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
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?
@rpelorosso would you mind repeating your questions in our new spectrum channel? https://spectrum.chat/victory
axisLabelComponent rather
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.
