We Keep Coding

React native svg charts border radius from top

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.

Victory js charts - Radar Chart & Polar Axis - How to set tick values like a clock

I want to create a data visualisation for daily weather temps And have it look like a clock with a central radar chart for the weather at each hour. I have my data from an API, and have made some progress in having it look somewhat correct, however... how do I set the ticks for the polar axis, on the outside so that 12 is at the top?
<VictoryChart polar>
<VictoryPolarAxis
style={{
axis: { stroke: "grey" },
}}
tickCount={12}
labelPlacement={"vertical"}
/>
<VictoryPolarAxis
dependentAxis
axisValue={hourly[0].time}
tickCount={1}
style={{
axis: {
stroke: "blue",
},
}}
/>
<VictoryArea
labelComponent={<VictoryLabel />}
data={hourly}
x="time"
y="temp"
interpolation={"basis"}
style={{
data: {
fill: "none",
stroke: "red",
strokeWidth: "0.5",
},
}}
/>
<VictoryLabel
// text={`${hourly[0].temp} ${hourly[0].phrase}`}
datum={{ x: 0, y: 0 }}
backgroundStyle={{ fill: "pink" }}
backgroundPadding={5}
/>
</VictoryChar

react-native-chart-kit's onDataPointClick not functional on web. Works on android

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',
},
});

How do I add a second attribute in JavaScript?

I am currently working with a jvectormap. Each county has a data-code (example: 48201). Here is my code for the counties that I have colored so far...
jvm.Map.maps = {};
jvm.Map.defaultParams = {
map: 'us_lcc_en',series: {
regions: [{
values: {
/* --------------- Active Franchise --------------- */
'42029':'#eb2e4d',
'42091':'#eb2e4d',
'42101':'#eb2e4d',
'42045':'#eb2e4d',
'42017':'#eb2e4d',
'42077':'#eb2e4d',
'42095':'#eb2e4d',
'48085':'#eb2e4d',
'48113':'#eb2e4d',
'48439':'#eb2e4d',
'48121':'#eb2e4d',
/* --------------- Available Franchise --------------- */
'42129':'#5d9eec',
'42007':'#5d9eec',
'42125':'#5d9eec',
'42019':'#5d9eec',
'42003':'#5d9eec',
'13067':'#5d9eec',
'13121':'#5d9eec',
'13057':'#5d9eec',
'13135':'#5d9eec',
'13089':'#5d9eec',
'13063':'#5d9eec',
'13151':'#5d9eec',
'13297':'#5d9eec',
'13117':'#5d9eec',
'48339':'#5d9eec',
'48201':'#5d9eec',
'48157':'#5d9eec',
'48167':'#5d9eec',
'48039':'#5d9eec',
'48029':'#5d9eec',
'48187':'#5d9eec',
'48091':'#5d9eec',
'04013':'#5d9eec',
'09003':'#5d9eec',
'09013':'#5d9eec',
'09001':'#5d9eec',
'09009':'#5d9eec',
'09007':'#5d9eec',
'09005':'#5d9eec',
/* --------------- Pending Franchise --------------- */
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute:'fill',
"stroke-width": 4
}]
},
backgroundColor: '#ffffff',
zoomButtons: true,
zoomOnScroll: false,
panOnDrag: true,
zoomMax: 8,
zoomMin: 1,
zoomStep: 1.6,
zoomAnimate: true,
regionsSelectable: false,
markersSelectable: false,
bindTouchEvents: true,
regionStyle: {
initial: {
fill: 'rgb(204, 204, 204)',
"fill-opacity": 1,
stroke: 'rgb(204, 204, 204)',
"stroke-width": 0,
"stroke-opacity": 1,
},
hover: {
"fill-opacity": 0.7,
cursor: 'pointer'
},
selected: {
fill: 'yellow'
},
selectedHover: {
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black',
},
hover: {
cursor: 'pointer'
}
},
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2,
cursor: 'pointer'
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markerLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
}
};
jvm.Map.apiEvents = {
onRegionTipShow: 'regionTipShow',
onRegionOver: 'regionOver',
onRegionOut: 'regionOut',
onRegionClick: 'regionClick',
onRegionSelected: 'regionSelected',
onMarkerTipShow: 'markerTipShow',
onMarkerOver: 'markerOver',
onMarkerOut: 'markerOut',
onMarkerClick: 'markerClick',
onMarkerSelected: 'markerSelected',
onViewportChange: 'viewportChange'
};
As you can see at the bottom...the attribute is set to 'fill'. I also want to add 'stroke'. How do I go about adding that second attribute?

Attributes in a javaScript object are separated by commas. Suppose you wanted to add a stroke-width attribute:
In this case, you would change the tail end, near the bottom, to look something like this:
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute: 'fill',
stroke-width: 4
}]
},
Which should make you happy. Though, as an aside, stroke-width will actually be the third attribute of 'regions': you'll note that values is written in the form of "values: {...}," -- it's an attribute too!

Incremental Integer in JCanvas text

I'm trying to increment text value everytime I click on the rectangle. What am I doing wrong ?
I don't understand because the call to my var works in drawText but doesn't in setLayer.
I looked at "setLayer" source code, who's working with '+=' syntax, but text is a String var and I don't want to make String concatenation.
value=1
$('canvas').drawText({
name: 'count',
fillStyle: '#0f0',
x: 20, y: 20,
fontSize: 22,
fontFamily: 'Verdana, sans-serif',
text: value
})
.drawRect({
strokeStyle: '#000',
fillStyle: '#ccc',
x: 20, y: 50,
width: 20,
height: 20,
layer: true,
click: function(layer) {
// Spin
$(this).animateLayer(layer, {
rotate: '+=180'
});
v=parseInt(value);
$(this).setLayer('count',{
text: value+1 // TRYING to increment over here
});
}})

Removing and recreating layers will make jCanvas unhappy. A much better solution would be to use setLayer() by parsing the current value to a number, incrementing that value, and passing it to the method:
$('canvas').drawText({
layer: true,
name: 'count',
fillStyle: '#0f0',
x: 20, y: 20,
fontSize: 22,
fontFamily: 'Verdana, sans-serif',
text: '1'
})
.drawRect({
strokeStyle: '#000',
fillStyle: '#ccc',
x: 20, y: 50,
width: 20,
height: 20,
layer: true,
click: function(layer) {
var $canvas = $(this),
countLayer = $canvas.getLayer('count');
// Spin
$canvas.animateLayer(layer, {
rotate: '+=180'
});
$canvas.setLayer(countLayer,{
text: parseFloat(countLayer.text) + 1
});
}
});

I found a workaround removing the layer and creating a new one at the same place.
function updateCount(param) {
$('canvas').removeLayer("count")
.drawText({
name: 'count',
fillStyle: '#0f0',
x: 250, y: 180,
fontSize: 22,
fontFamily: 'Verdana, sans-serif',
text: value,
layer: true,
maxWidth: 200
})
.drawLayers();
}