import React from 'react'
import { BarChart, Grid } from 'react-native-svg-charts'
import { Defs, LinearGradient, Stop } from "react-native-svg";
class ColorBarExample extends React.PureComponent {
render() {
const data = [
{
value: 50,
},
{
value: 10,
svg: {
fill: 'rgba(134, 65, 244, 0.5)',
},
},
{
value: 40,
svg: {
stroke: 'purple',
strokeWidth: 2,
fill: 'white',
strokeDasharray: [ 4, 2 ],
},
},
{
value: 95,
svg: {
fill: 'url(#gradient)',
},
},
{
value: 85,
svg: {
fill: 'green',
},
},
]
const Gradient = () => (
<Defs key={'gradient'}>
<LinearGradient id={'gradient'} x1={'0'} y={'0%'} x2={'100%'} y2={'0%'}>
<Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'}/>
<Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'}/>
</LinearGradient>
</Defs>
)
return (
<BarChart
style={{ height: 200 }}
data={data}
gridMin={0}
svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
yAccessor={({ item }) => item.value}
contentInset={{ top: 20, bottom: 20 }}
>
<Grid/>
<Gradient/>
</BarChart>
)
}
}
export default ColorBarExample
I am using this code. I need a help to make add border radius at the top of the charts bar. So i also see files of the animated-path.js and other in the svg charts. But didn't get how to make borders round in the code using d3 shape or anything else. Let me know if get an idea to make it round at the top.
Related
I was following the React learn section when i encountered this.
I´m drawing three shapes from an array called shapes. I modify the entire array when i press the button and the array do change when i do this.
import { useState } from "react";
export default function MyApp() {
const initialShapes = [
{ name: "circle", x: 50, y: 10, id: 1 },
{ name: "square", x: 100, y: 10, id: 2 },
{ name: "circle", x: 150, y: 10, id: 3 },
];
const [shapes, setShapes] = useState(initialShapes);
console.log(shapes);
return (
<>
<button
onClick={() => {
setShapes([{ name: "square", x: 20, y: 70, id: 2 }]);
}}
>
Just show one shape
</button>
{initialShapes.map((shape) => {
return (
<div
key={shape.id}
style={
shape.name === "circle"
? {
position: "absolute",
backgroundColor: "red",
width: "30px",
height: "30px",
borderRadius: "50px",
translate: `${shape.x}px ${shape.y}px`,
}
: {
position: "absolute",
backgroundColor: "red",
width: "30px",
height: "30px",
translate: `${shape.x}px ${shape.y}px`,
}
}
></div>
);
})}
</>
);
}
I can verify this by the console log at the beginning of the component. The state does uptade indeed but my visual shapes don't uptade with the new state.
const [shapes, setShapes] = useState(initialShapes);
console.log(shapes);
return (..
Console on first state
[
{
"name": "circle",
"x": 50,
"y": 10,
"id": 1
},
{
"name": "square",
"x": 100,
"y": 10,
"id": 2
},
{
"name": "circle",
"x": 150,
"y": 10,
"id": 3
}
]
Console on second state
[
{
"name": "square",
"x": 20,
"y": 70,
"id": 2
}
]
I know that if it was a mutation to the array, re-rendering won't be trigger but i'm actually setting a new state.
Why does this happen, react shouldn't notice the difference between array changes and trigger the render again ?
You are not using the shapes variable, you are mapping initialShapes.
I'm using react-native-chart-kit in an expo project to graph data.
I have set up onDataPointClick as below- and Expo snack here demonstrating the error: https://snack.expo.dev/#warm__tape/react-native-chart-kit-test
<LineChart
...
onDataPointClick={(data) => {
console.log('Data point clicked');
}}
/>
Click is successfully logged to console in android. Nothing happens in web. Not sure what the issue is?
Full app.js of demo of the issue:
import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
console.log('Test');
export default function App() {
return (
<View>
<Text>Bezier Line Chart</Text>
<LineChart
data={{
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
]
}
]
}}
width={Dimensions.get("window").width} // from react-native
height={220}
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
onDataPointClick={data => {
console.log(data, 'data');
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I have a big issue with my react app. I have several pie charts. But I have a displaying problem. In some browsers, they are working but in others, they are not working. For example, when I try them in two exactly same phones & browsers they are working one of them and not working in the other one.
I think this problem is not related to browsers, accounts, devices but I cannot find out what is wrong with that?
Google charts and recharts not working in pie chart but my Google bar chart is working.
When I try to display pie chart with dummy data it works. I think there is a problem with my data.
api:
[{"title":"TOPLAM DÖNEN VARLIKLAR","value1":0.8099237254874144,"value2":0.6716967762970417},{"title":"TOPLAM DURAN VARLIKLAR","value1":0.19007627451258552,"value2":0.3283032237029582},{"title":"Toplam Kısa Vadeli Yükümlülükler","value1":0.6453778969419264,"value2":0.42796665648321913},{"title":"Toplam Uzun Vadeli Yükümlülükler","value1":0.12545336756938238,"value2":0.15300843856942245},{"title":"TOPLAM ÖZKAYNAKLAR","value1":0.22916873548869124,"value2":0.41902490494735845}]
react
export function DonutValue({donut, comp, start, end}) {
const colorsheme = [
'#2b5818', '#50d741',
'#7d99e7', '#355dd4', '#083edd'];
const valr = [
['a', 'b'],
[capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value1.toLocaleString() * 100, 10)],
[capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value1.toLocaleString() * 100, 10)]
];
if (end == 5) {
valr.push(
[capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value1.toLocaleString() * 100, 10)]
);
}
const vall = [
['a', 'b'],
[capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value2.toLocaleString() * 100, 10)],
[capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value2.toLocaleString() * 100, 10)]
];
if (end == 5) {
vall.push(
[capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value2.toLocaleString() * 100, 10)]
);
}
return <Row>
<Col sm="12" className="text-center">
<div style={{width: '100%'}}>
<ResponsiveContainer width={'99%'} height={300}>
<Chart
chartType="PieChart"
data={valr}
options={{
backgroundColor: 'transparent',
title: '',
pieHole: 0.6,
slices: [
{
color: colorsheme[start + 0],
},
{
color: colorsheme[start + 1],
},
{
color: colorsheme[start + 2],
},
],
legend: {
position: 'bottom',
alignment: 'center',
textStyle: {
color: '#ffdc5a',
fontSize: 12
},
},
border: {
color: 'red',
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
top: 0,
width: '100%',
height: '60%',
}
}}
width={'100%'}
height={'400px'}
legend_toggle
/>
</ResponsiveContainer>
</div>
<h4 style={{margin: '0 5px', padding: 0}}>
{comp[1].value}
</h4>
</Col>
</Row>
}
The problem is in parseInt method. I cannot figure out why but when I delete it, the chart worked.
import React from 'react'
import { Doughnut } from 'react-chartjs-2'
function BillingChart() {
return (
<div>
<Doughnut
data={{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
}}
height={400}
width={600}
/>
</div>
)
}
export default BillingChart
By default, Victory scatters all bars across the chart:
And the code:
<VictoryChart
width={650}
theme={VictoryTheme.material}
domainPadding={30}
>
<VictoryAxis
tickFormat={data.map(x => x.title)}
style={{
axis: { stroke: 'rgb(236, 239, 241)', strokeWidth: 1, strokeDasharray: [10, 5]},
grid: { stroke: false },
ticks: { stroke: 'none', size: 0 },
tickLabels: { fontSize: 12, padding: 15 }
}}
/>
<VictoryAxis
crossAxis={false}
domain={[0, 2000]}
dependentAxis
tickFormat={x => x}
style={{
axis: { stroke: false },
axisLabel: { fontSize: 12, padding: 50 },
ticks: { stroke: 'none', size: 0 },
tickLabels: { size: 0, padding: 20 }
}}
/>
<VictoryBar
data={dataset}
y="value"
x="title"
style={{
data: { fill: ({ datum }) => datum.color },
}}
/>
</VictoryChart>
How to center them and make middle an entry point for scattering? I'm looking for something like an alignment prop for root chart component
I am working with JointJS ports. By default ports are displayed as circles:
https://resources.jointjs.com/tutorial/ports
Is there any way to format the style from circle to rectangle? Please suggest any class names where I can override this.
the tutorial there is using the devs.Model shapes and it's a bit outdated approach...
There is a markup option in the port configuration, see more at https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Element.ports
I'd recommend a port demo (https://github.com/clientIO/joint/tree/master/demo/ports). There is even a shape you're might be looking for:
var g6 = new joint.shapes.basic.Circle({
position: { x: 50, y: 50 },
size: { width: 500, height: 300 },
attrs: {
text: { text: 'compensateRotation: true', fill: '#6a6c8a' },
circle: { stroke: '#31d0c6', 'stroke-width': 2 }
},
ports: {
groups: {
'a': {
position: {
name: 'ellipseSpread',
args: { startAngle: 0, dr: 0, compensateRotation: true }
},
label: {
position: 'radial'
},
attrs: {
rect: {
stroke: '#31d0c6',
'stroke-width': 2,
width: 20,
height: 20,
x: -10,
y: -10
},
'.dot': {
fill: '#fe854f',
r: 2
},
text: {
fill: '#6a6c8a'
}
},
markup: '<g><rect/><circle class="dot"/></g>'
}
}
}
});