Questions tagged [victory-charts]
237 questions
15
votes
3 answers
Remove Axis from VictoryChart
I'm using victory-native and have a VictoryChart with a VictoryLine and VictoryArea as children and want to remove the axis of the chart. Is there any way to access it through props? Probably the color can be set to transparent then.
Here is some…
student96
- 345
- 1
- 4
- 14
12
votes
1 answer
TypeScript: override and fix typing definitions for packages
I'm using the React victory library for charts, and I'm using TypeScript. I have added the @types/victory package to my project, but unfortunately, it's missing a bunch of key definitions that I need. For some interfaces, it was missing a couple of…
Farzad
- 1,770
- 4
- 26
- 48
11
votes
0 answers
Improve rendering speed of Victory Native / VictoryChart
I am rendering a VictoryChart within swipe cards, and swiping is slow. I suspect that the reason is slow rendering of the charts (when replaced with static images, swiping is fast).
Reading various discussions about Victory and Victory Native…
Yossi
- 5,577
- 7
- 41
- 76
8
votes
2 answers
How to control Victory x axis ticks labels
I'm using Victory to render a data set:
class App extends React.Component {
render() {
return (
dhrm
- 14,335
- 34
- 117
- 183
8
votes
2 answers
Victory Charts background grid
Is it possible to display a grid like this using Victory charts?
So far I can only get a grid with both vertical and horizontal lines on top of my bars likes this:
dingdingding
- 1,411
- 1
- 15
- 23
8
votes
1 answer
react native: Victory chart formatting for x-axis time column
I am currently working with Victory charts and am having an issue in dealing with adding times to the x-axis. I need to display a line graph that shows numbers between 0 and 1(percentages) in the y-axis and times in the x-axis. I have reviewed…
user1790300
- 2,143
- 10
- 54
- 123
8
votes
2 answers
VictoryLegend: how to relatively position (e.g. bottom center)
I'm using VictoryCharts, specifically the VictoryLegend component to render the legend for my chart. According to the docs it sounds like the only options for positioning the legend are absolute x and y coordinates. I'm trying to position the legend…
Steve Grossi
- 2,765
- 1
- 22
- 26
8
votes
1 answer
Need some assistance with Victory Charts
I am working with React Victory Charts and need some assistance with styling.
I am very new to Victory Charts and your help will be highly accepted.
I need help with:
Padding between axis, bars and text.
Some text being cut off.
The bar…
Njuguna Mureithi
- 3,506
- 1
- 21
- 41
7
votes
3 answers
Recharts is not working for the React with typescript
I have an issue with handling chart libraries.
Step by step
Create an empty project
$ npx create-react-app chart-demo --template typescript
Add Recharts
$ yarn add @types/recharts
Run the project
$ yarn start
It shows the following…
incredever
- 231
- 1
- 2
- 11
7
votes
2 answers
Victory charts, how to change axis and label colors
this should be a very simple thing to do, but for the life of me I cannot achieve the effect I want, I have a chart, on a dark background, which means I want to change the color of the labels to white, however I cannot achieve this.
The code I'm…
Oscar Franco
- 5,691
- 5
- 34
- 56
7
votes
6 answers
How to specify the color scale within the data object in Victory Pie
I used VictoryChart to implement a pie graph and it works fine...
render() {
const data_distribution = this.state.pie_keys.map((d) => ({x:d, y:this.state.pie_data[d], label:d }));
return (
buydadip
- 8,890
- 22
- 79
- 154
6
votes
1 answer
Victory Charts - tooltip on line chart
Quick question - I have a line chart based on Victory Charts i'd like to display a tooltip on, when someone hovers over the data.
https://formidable.com/blog/2016/09/19/victory-0-12-0-the-one-true-tooltip/
Indicates a 'VictoryVoronoiTooltip' may be…
Simon
- 323
- 2
- 15
5
votes
1 answer
How to get numeric value from Reanmited Value?
I create a simple animation using react native reanimated but I can't access the numeric value of Reanimated Value
I using victory native pie chart, and I want to make a simple effect that pie angle goes from 0 to 360 but I've tried react-native…
Muhammed Saeed
- 101
- 1
- 10
5
votes
0 answers
How to fill gradient to x-axis in Victory chart
I am trying to fill the same gradient as filled in area of chart to the x-axis. Something like in the image given below. How can we do that?
I tried giving fill: "url(#myGradient)", to the VictoryAxis style object. But seems its not working.
Here…
Mustkeem K
- 8,158
- 2
- 32
- 43
5
votes
1 answer
Why aren't Victory Charts components composable?
I'm trying to create a React component that is a Line and Scatter chart to look like this:
The React component for a single line with circles looks like this:
function Line ({ color, chartData }) {
return (
…
willlma
- 7,353
- 2
- 30
- 45