I am having troubles placing the google react charts on the left of a full width container without the legend thinking it's being cut off.
If I leave it as a default it looks like this:
However I want it to be on the left side and the legend to be next to it.
When I change the position of the chart area:
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
It then looks like this:
For whatever reason it thinks there isn't enough space and it cuts the legend text which is really annoying.
Here is the code I am using:
const pieOptions = {
title: '',
pieHole: 0.6,
slices: [
{
color: '#00A3E0',
},
{
color: '#F2A900',
},
{
color: '#43B02A',
},
{
color: '#DF4661',
},
{
color: '#003865',
},
{
color: '#A15A95',
},
{
color: '#FF6A13',
},
],
legend: {
position: 'right',
alignment: 'end',
textStyle: {
color: '#666',
fontSize: 12,
},
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
fontName: 'inherit',
fontSize: 12,
}
Can anyone advise?
Also if this is not fixable, can you please recommend a chart which supports that and custom colours please?
Thank you in advance!
Related
How can I change the x and y co-ordinates of text in react-google-charts?
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
marginRight: 10,
},
},
hAxis: {
textStyle: {
slantedTextAngle: 90
},
}
{
legend: { position: "bottom" },
colors: ["#01B8FF", "#EB6F33", "#03C895"],
chartArea: { width: "40%", height: "70%" },
isStacked: true,
bar: {groupWidth: '30'},
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
},
},
};
This properties can be used to create a horizontal stacked chart.
I am trying to use google react pie chart however I am having a hard time position the title.
Here is my code:
const pieOptions = {
title: 'my awesome chart',
pieHole: 0.6,
slices: [
{
color: '#00a3e0',
},
{
color: '#f2a900',
},
{
color: 'F16A21',
},
{
color: '#e9a227',
},
],
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '233238',
fontSize: 14,
},
},
tooltip: {
showColorCode: true,
},
// chartArea: {
// left: 0,
// top: 0,
// width: '100%',
// height: '70%',
// },
fontName: 'Roboto',
fontSize: 20,
}
<Chart
chartType="PieChart"
data={[
['Item', 'Numbers'],
['Item 1', 5000],
['Item 2', 20000],
['Item 3', 6000],
]}
options={pieOptions}
graph_id="PieChart"
width={'100%'}
height={'220px'}
legend_toggle
/>
Here is what I get:
My desired result is to put the title above the legend but I am clueless how to do so.
Here is a link to the npm package I am using:
https://github.com/RakanNimer/react-google-charts#donut-chart
https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js
It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.
Read more at the docs.
I have a data of voltages from last one month. The zingchart grapht y-axis is inconsistent. What might be the issue?
Chart image
Submitting Requests
In the future we suggest adding a chart JSON to your question so we can create a demo for your solution. You can read more about gettin your chart JSON here.
Solution
You have series values input as Strings. You can do two things.
make the values Numbers and NOT Strings
Keep the values as Strings and add zingchart.QUOTEDVALUES = true before the zingchart.render method. This tells ZingChart you intentionally set Strings for values. There are benefits and use cases for using String values so the default is to have this turned set to false.
Demo here: https://app.zingsoft.com/demos/embed/OIJAJIA7
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
gui: {
contextMenu: {
button: {
visible: false
}
}
},
globals: {
shadow: false,
fontFamily: 'Helvetica'
},
type: 'area',
legend: {
layout: 'x4',
marker: {
borderRadius: '50px',
borderColor: 'transparent'
},
item: {
fontColor: 'white'
},
backgroundColor: 'transparent',
borderColor: 'transparent'
},
tooltip: {
visible: false
},
plot: {
aspect: 'spline',
marker: {
visible: false
},
lineWidth: '2px'
},
// values are strings
series: [{
text: 'Cell Two (V) Optimum 8V',
backgroundColor1: '#77d9f8',
values: ['0.286907020873', '0.300569259962', '0.300569259962', '0.286907020873','0.286957020873' ],
backgroundColor2: '#272822',
lineColor: '#40beeb',
palette: 1
}],
backgroundColor: '#434343',
scaleX: {
transform: {
type: 'date'
},
values: ['2019/08/05 10:27', '2019/08/05 10:42', '2019/08/05 10:55', '2019/08/05 10:58', '2019/08/05 11:01'],
zooming: true,
tick: {
lineColor: 'white',
lineWidth: '1px'
},
item: {
fontColor: 'white'
},
guide: {
visible: false
},
maxItems: 8,
lineColor: 'white',
lineWidth: '1px'
},
scaleY: {
tick: {
lineColor: 'white',
lineWidth: '1px'
},
guide: {
lineStyle: 'solid',
lineColor: '#626262'
},
item: {
visible: true,
fontColor: 'white'
},
lineColor: 'white',
lineWidth: '1px'
},
crosshairX: {
scaleLabel: {
backgroundColor: '#fff',
fontColor: 'black'
},
plotLabel: {
_text: 'Number of hits : %v',
backgroundColor: '#434343',
fontColor: '#FFF'
}
}
};
zingchart.QUOTEDVALUES = true;
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
I am trying to create a bottom tabBar with react-navigation which is transparent.
I am using the "tabBarComponent: " BottomTabNavigatorConfig. and background of the MyCustomTabBar is transparent.
Yet I am getting a white background in tabbar.
const DashboardTabNavigator = createBottomTabNavigator(
{
Posts: PostsStack,
Subreddits: SubredditsScreen,
Profile: ProfileScreen,
Inbox: InboxScreen,
Search: SearchScreen
},
{
animationEnabled: false,
swipeEnabled: false,
lazyLoad: true,
tabBarOptions: {
tinColor: 'transparent',
activeTintColor: 'red',
inactiveTintColor: 'green',
showIcon: true,
showLabel: true,
lazyLoad: true,
upperCaseLabel: false,
indicatorStyle: {
backgroundColor: 'transparent'
},
style: {
backgroundColor: 'rgba(22, 22, 22, 0.6)',
borderTopWidth: 1,
borderTopColor: '#996600',
position: 'absolute',
left: 0,
right: 0,
bottom: 0
}
},
tabBarComponent: props => <TabBar {...props} />,
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return routeName === 'Posts'
? { header: null }
: { headerTitle: routeName }; // Disabled TabNavigators header for Posts screen cos It has its own header from another stacknavigator.
}
}
);
Looks like this
tabBarOptions are ignored if a tabBarComponent is provided.
Solution to the issue was to apply following style to the parent view of the custom component.
style: {
backgroundColor: 'rgba(22, 22, 22, 0.6)',
borderTopWidth: 1,
borderTopColor: '#996600',
position: 'absolute',
left: 0,
right: 0,
bottom: 0
}
set in tab bar option
tabBarOptions: {
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
elevation: 0,
},
},
I'm not able to align the text to center.
HTML code
<zingchart id="ring" zc-json="data" ></zingchart>
zingchart json data
$scope.data = {
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "ring",
backgroundColor: "#fff",
legend: {
layout: "x5",
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v $"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
"font-color":"black",
fontSize: "15px",
textAlpha: 1,
}
},
series: [{
text: "Total Billed",
values: $scope.billedHours,
backgroundColor: "#97c563",
}, {
text: "Total Budget",
values: $scope.projectRevenue,
backgroundColor: "#f7d347",
}]
};
I'm using this Libary for the very first time, tried different options but nothing happend.
need help from experts, please suggest something.
thanks in advance.
I tried this in my project and this should do the trick, just replace your legend property with this.
If I am right you can also use layout: "center"
legend: {
layout: "2x2", //this should center it on mid
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
To align the legend center you can use the attribute align:center. We have extensive documentation at the following links:
Legend Tutorial
Legend JSON Docs
var myConfig = {
type: 'pie',
plot: {
layout: 'auto'
},
legend: {
layout: "x5",
align: 'center',
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
series: [
{
values: [35]
},
{
values: [25]
},
{
values: [15]
},
{
values: [45]
},
{
values: [75]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>