I'm using VictoryPie to show my data, however, I want to be able to choose which color represents which section. Mainly because this is a pie chart of colors. I have seen a couple questions on StackOverflow asking something similar, but none of them fixed my problem.
My data object looks like:
[
{
"color": "#0000fe",
"x": "blue",
"y": 1
},
{
"color": "#fe00fe",
"x": "fuchsia",
"y": 2
},
{
"color": "#fefe00",
"x": "yellow",
"y": 8
},
{
"color": "#008000",
"x": "green",
"y": 20
}
]
And my code to render it is:
<VictoryPie
data={this.state.sets}
style={{
data: { fill: (d) => d.color }
}}
/>
My Pie currently looks entirely black, and I wanted to know if I was doing something wrong.
you're taking a color from the wrong place, try this:
<VictoryPie
data={this.state.sets}
style={{
data: { fill: (d) => d.datum.color }
}}
/>
Related
I have been attempting to utilize the barcode scanner via the Camera exported by expo-camera due to being able to freeze the scanner upon scanning a valid QRCode. The problem is, the bounds being returned for the scanned region are incorrect.
Here is my usage of the Camera component:
<Camera
flashMode={flashMode}
barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
onBarCodeScanned={scannedRegion ? undefined : handleQRScanned}
style={{
width: "100%",
height: "100%",
}}
ref={(el) => setScanner(el)}
>
The handleQRScanned method is just logging the output.
And here is what the scanned object looks like:
{
"bounds": Object {
"origin": Object {
"x": 0.7085477709770203,
"y": 0.2856549024581909,
},
"size": Object {
"height": 0.41216737031936646,
"width": 0.23583674430847168,
},
},
"cornerPoints": Array [
Object {
"x": 0.7085477791037765,
"y": 0.6859185008442614,
},
Object {
"x": 0.9367770043059619,
"y": 0.69782228348775,
},
Object {
"x": 0.9443845063336068,
"y": 0.29520473921943935,
},
Object {
"x": 0.7161692883258375,
"y": 0.28565489300913066,
},
],
"data": "exp://192.168.1.4:19000",
"target": 5303,
"type": "org.iso.QRCode",
}
Also, when previously using the BarcodeScanner exported by expo-barcode-scanner directly, the bounds come out correct. Has anyone experienced this before?
I had the same issue, I solved it by multiplying bound values with screen height and width from Dimensions API. By this way, you can correctly localize barcodes in screen. Here is the code snippet. Height and width are inversely proportioned meaning that bounds.size.width actually corresponds to screen height and vice versa.
height: Number(bounds.size.width) * deviceHeight,
width: Number(bounds.size.height) * deviceWidth,
right: Number(bounds.origin.y) * deviceWidth,
top: Number(bounds.origin.x) * deviceHeight,
I'm running into a problem. The bar series is not coming right under it's label. I can't figure out what is going wrong.
Here is the code for it
const FlexibleXYPlot = makeWidthFlexible(XYPlot);
<FlexibleXYPlot height={graphContainer.height} margin={graphContainer.margin} xDistance={0} xType="ordinal">
<HorizontalGridLines />
<XAxis/>
<YAxis orientation="right" style={yAxisStyles} />
{ this.state.data.map((lineData, i) => (
<VerticalBarSeries
key={i}
data={lineData.timeline}
/>
)); }
</FlexibleXYPlot>
and the data is this
[
{
"timeline": [
{
"x": "dataA",
"y": 12.21
}
]
},
{
"timeline": [
{
"x": "dataB",
"y": 21.09
}
]
},
{
"timeline": [
{
"x": "dataC",
"y": 16.66
}
]
}
I figured it out.
For each bar I was creating a separate series. I just had to pass the whole data to a single series. Now if somebody wants each bar to have a different color in a single series they can pass the color with the data like given below
[
{
"x": "dataA",
"y": 12.21,
"color": <something>
},
{
"x": "dataB",
"y": 21.09,
"color": <something>
},
{
"x": "dataC",
"y": 16.66,
"color": <something>
}
]
and we need to pass colorType="literal" to the series itself.
I need the text in this graph to stay center wrapped but it goes horizontal instead. Had anyone had this issue with chartjs?
Picture of the graph
It works if you used a set amount of letters such as 'dummy'.
datasets: {
labels: ["Dummy text 1", "Dummy text 2", "Dummy text 3"],
datasets: [
{
label: "",
data: [13, 11, 2],
backgroundColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderWidth: 1
}
]
Fixed this easily with a multi-array and changing the xaxes. Here's the example fix -
labels: [
["Dummy", "Data 1"],
["Dummy", "Data 2"],
["Dummy", "Data 3"]
],
xAxes: [
{
ticks: {
maxRotation: 0,
minRotation: 0
},
}
]
Hopefully this helps someone out :)
scales: {
xAxes: [
{
ticks: {
callback: function (label, index, labels) {
if (/\s/.test(label)) {
return label.split(' ');
} else {
return label;
}
}
}
}
]
This callback function will split your X Axis labels on the basis of space and arrange all the words in a wrapped manner. You can use the same function for Y axis values as well
I am working with redux, configured state as Immutable Js Ordered Map.
Below is the state:
{
"layers": {
"items": {
"yrgroih9": {
"width": '300px',
"x": '700px',
"y": '700px'
},
"qhy0dukj": {
"width": '160px',
"x": '500px',
"y": '500px'
},
"7lw2nvma": { //Target object
"width": '250px',
"x": '300px',
"y": '300px'
},
"jdkhsd9d": {
"width": '280px',
"x": '100px',
"y": '100px'
}
}
}
}
I want to shift the key 7lw2nvma one step up, & below is i want:
{
"layers": {
"items": {
"yrgroih9": {
"width": '300px',
"x": '700px',
"y": '700px'
},
"7lw2nvma": { //Shifted object
"width": '250px',
"x": '300px',
"y": '300px'
},
"qhy0dukj": {
"width": '160px',
"x": '500px',
"y": '500px'
},
"jdkhsd9d": {
"width": '280px',
"x": '100px',
"y": '100px'
}
}
}
}
Reducer code:
import { OrderedMap, fromJS } from 'immutable';
export default function myApp(state = new OrderedMap, action) {
switch (action.type) {
case 'SHIFT_OBJECT':
var shiftObj = "7lw2nvma"; //Known value
//return state.getIn(["layers","items"]).shift(shiftObj); // Something like this to shift object.
}
}
Help me to get the desired output.
Note: If it is not possible in OrderedMap, then say with List.
I found answer based on sortBy function in Immutable Js OrderedMap.
Now i added index values in that object as shown below:
{
"layers": {
"items": {
"yrgroih9": {
"index":0,
"width": '300px',
"x": '700px',
"y": '700px'
},
"qhy0dukj": { //Another known value
"index":1,
"width": '160px',
"x": '500px',
"y": '500px'
},
"7lw2nvma": { //Target object (shift up)
"index":2,
"width": '250px',
"x": '300px',
"y": '300px'
},
"jdkhsd9d": {
"index":3,
"width": '280px',
"x": '100px',
"y": '100px'
}
}
}
}
I have two known values 7lw2nvma & qhy0dukj.
Using setIn changed 7lw2nvma index as 1 & qhy0dukj index as 2.
Using sortBy function i can sort object based on modified index values.
var getSorted = state.getIn(["layers","items"]).sortBy(function(value, key) {
return value.get("index");
});
And now the state items sorted successfully.
You are trying to modify directly your state. That is forbidden for an immutable.
You can use Object.assign to create a new one.
return Object.assign({}, state.getIn(["layers","items"]).shift(shiftObj))
EDIT: You can use an array of your keys, sort it as you like and construct a new object for your state.
Something like:
let tab = Object.keys(state.getIn(["layers","items"]))
tab.sort() // sort keys by name
const obj = tab.reduce((o, key) => Object.assign(o, {[key]: state.getIn(["layers","items"])[key]}), {}) //contruct a new object from your ordered array and current state, you can also create another const on state.getIn(["layers","items"]) to increase perfs
console.log(obj)
return obj
Is there any angularjs library that can draw a chart with stacked bars + lines? Like this:
I'm looking for any library that supports this, with angular directives. I've found angular-nvd3-directives, that supports multicharts (combined chart types), but I don't think it supports bar stacking, only grouping.
I know that these questions are not well suited to SO, I'm looking for ANY, ONE, lib, not recommendations. (also it has to be free for commercial use)
The ZingChart-AngularJS directive exposes the entire ZingChart library, which supports mixed charts. It's free for commercial use. I made a demo on CodePen of what you're looking for.
Here's what your JS would look like:
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) {
$scope.myJson = {
"type": "mixed",
"background-color": "white",
"plot": {
"stacked": true
},
"series": [{
"type": "bar",
"values": [25, 30, 15, 20, 25],
"stack": 1,
"background-color": "#4372c1",
"hover-state": {
"visible": false
},
}, {
"type": "bar",
"values": [20, 10, 30, 25, 15],
"stack": 1,
"background-color": "#ea4204",
"hover-state": {
"visible": false
},
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
}
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
},
},]
};
});
angular-nvd3 supports this.
All you have to do is set bars1.stacked=true and bars2.stacked=true
http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview
$scope.options = {
chart: {
type: 'multiChart',
...
bars1: {stacked:true},
bars2: {stacked:true},
...
};
}
}