Is there a way to give a custom space/padding in between x-axis Labels in React-Native-Chart-Kit? Example if we have labels from Jan-Dec, x-axis labels in the chart gets very compact. And even if we give a custom space between x-axis Labels then how do we give a Horizontal scroll feature for the full chart since it overflows onto the right side. Tried with following. Didn't work. Please help. Thanks.
propsForLabels: {
fontSize: "14",
fill: "rgba(10, 10, 10, 1)",
fontWeight: 500,
padding: 5
},
You can try horizontalOffset or check this issue looks like you can use patch or fork from this issue https://github.com/indiespirit/react-native-chart-kit/issues/538 to resolve your problem.
Related
I am getting an error saying "textAlignVertical" is not a valid style property when attempting to use the 'textAlignVertical' style on a Text element. I've checked the documentation and it says I should be able to use this style property: https://facebook.github.io/react-native/docs/text.html
has anyone else had this issue?
The textAlignVertical style is an Android-only property. If you are developing on iOS, try using the flexbox alignment property alignItems: center instead.
It also appears that the textAlignVertical property was moved from TextInput properties to the Text element styles only three days ago, and is going to be released in React Native 0.19.
I am not sure how the React Native documentation is generated, but based on my reading of this commit diff, the documentation appears to be ahead of the latest released version.
Sometimes you might find that alignItems won't work well -- I saw that an icon that I was using disappeared entirely. I instead just added an alignSelf: 'center' to the styling on the text itself (rather than the parent like you need to do with alignItems) and it seemed to fix it.
For textAlignVertical to work properly, add lineHeight prop instead of height for ios
height: phoneWidth * 0.09, // for android
lineHeight: phoneWidth * 0.09, // for ios
The line height solution worked for me. I am writing this post to explicitly show how to set the line height by platform:
yourComponent: {
width: 44, height: 44,
...Platform.select({
ios: {
lineHeight: 44
},
android: {}
}),
textAlign: 'center', textAlignVertical: 'center',
}
It's important that your and height and line height are the same and that you do it by platform.
It's important to note that I also have this component nested in a view with alignItems set to center.
I just wanted to explicitly write this code out as I had to piece it together from a few posts and this should make it easier if someone is looking for a quick copy/paste solution.
I'm using Cytoscape to generate a simple flow/state diagram and I'm able to generate the graph, but as the graph grows, it just keeps zooming out so the nodes become really small. Is there a way to have Cytoscape to just keep growing in height instead of shrinking the graph and having to zoom in? I would rather have the nodes stay a known size (i.e. 100px X 100px) and as the graph grows and have it grow vertically so the user just has to scroll down the page to see the rest of the graph. Right now, the viewport is restricted to the height of the page when the page is first rendered. Let me know if there is a way to achieve a vertically scrolling graph with fixed size nodes. Thanks!
Based on the suggestions of maxkfranz and gcpdev, I came up with the following solution that seems to work pretty well.
Cytoscope Init:
cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'roundrectangle',
'height': 80,
'width': 150,
'background-fit': 'cover',
'background-color': '#F5F5F5',
'border-color': '#F5F5F5',
'border-width': 3,
'border-opacity': 0.5,
'text-valign': 'center',
'content': 'data(name)',
})
.selector('edge')
.css({
'width': 6,
'target-arrow-shape': 'triangle',
'line-color': '#0088cc',
'target-arrow-color': '#0088cc'
}),
elements: data,
zoomingEnabled: false,
layout: {
name: 'breadthfirst',
directed: true,
padding: 10
}
}); // cy init
After we have initialized the diagram, we have to set the size of our container div to be at least as high as the bounds of the graph. We also need to reset the size anytime someone resizes the window.
cy.on('ready', function () {
updateBounds();
});
//if they resize the window, resize the diagram
$(window).resize(function () {
updateBounds();
});
var updateBounds = function () {
var bounds = cy.elements().boundingBox();
$('#cyContainer').css('height', bounds.h + 300);
cy.center();
cy.resize();
//fix the Edgehandles
$('#cy').cytoscapeEdgehandles('resize');
};
I am also calling updateBounds() any time the user add a node to the graph. This gives me a graph that is full size and grows vertically. I can scroll down the page just fine as well!
(1) Layouts usually fit to the graph. Set layoutOptions.fit: false to override this default behaviour (at least for included layouts).
(2) The use of (1) means that running the layout will leave the graph viewport in the reset state (i.e. default zoom of 1 at origin position { x: 0, y: 0 }). If you want the viewport maintained at zoom: 1 but with an altered pan position, you can use cy.pan() with some simple calculations with cy.elements().boundingBox(). You may also find cy.center() useful -- though perhaps only horizontally in your case.
(3) The use of (2) means that your graph viewport (i.e. canvas) will be the same size, but the user will be able to pan down to see the remainder of the graph. If you prefer scrolling over panning, you will need to implement your own mechanism for this. You can make clever combination of cy.elements().boundingBox() and jQuery('#cy-div').css(), for example, to adjust the cy div to the size of the graph. You may want to turn off user panning and zooming (and autolock nodes etc.), if the graph is not interactive.
Well, I think you could set the zoom amount to fixed and disable zoom in/out, and use some strategy to dynamically change your div/page's height.
This answer or this one should help you.
Using the example from the docs Ext.chart.series.Bar it should be pretty easy to achieve this.
The series has a label config that contains a color properties. Changing this has no effect. Or am I missing something?
I would like to display a white text on top of the bars.
Working code for the example
http://jsfiddle.net/dfDb8/
On line 48 I try to set the color to white
label: {
display: 'insideStart',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#fff' //this is what I want to change
'text-anchor': 'middle'
},
Any ideas?
The following attribute:
fill: '#fff'
seems to work. I am not completely sure why though.
I am working on dojo pie chart. When I feed data to the chart as
[ {y:10}, {y:40}, {y:30}]
I want to see the values displayed on the chart as 10%, 40% and 30%. But the chart displays as 12.5%, 37.5% and 50%. What should I do, to enable the pie chart display the values, which I send as it is?
Any help is appreciated
The solution is simple: set labels as you want them: [{y: 10, text: "10%"}, ...] and so on. You can easily automate it. A sketch:
var items = [10, 40, 30];
addSeries("default", dojo.map(values, function(item){
return {y: item, text: item + "%"};
});
The same way you can add custom tooltips, or some other attributes (e.g., colors).
I have created a barchart with the API, but the names on the x-axis are too long and being cut off. Is there any way to fix this, like rotating them or moving them further down?
I have not been able to find anything in the documentation
Set the chartArea.height to a smaller size.
... { width: 400, chartArea: { height: 200 }, ...
You can do the same with width, depending on which axis you are having a problem with.