I am trying to create a Pie Chart dashboard. Chart is getting drawn based on the value, but the legend is not getting displayed. I have tried the label as below.
Chart
Summary.js:
import React, { Component } from 'react';
import PieChart from 'react-minimal-pie-chart';
class Summary extends Component {
render()
{
return(
<PieChart className="chart-style" x={50} y={60} outerRadius={100} innerRadius={50}
data={[
{ value: 11, color: '#E38627',label: 'New' },
{ value: 12, color: '#C13C37',label: 'Closed' },
{ value: 8, color: '#6A2135',label: 'Reopened' },
]}
/>
);
}
}
export default Summary;
Adding this works for me.
label={(props) => { return props.dataEntry.title;}}
Example
<PieChart
label={(props) => { return props.dataEntry.title;}}
data={[{ title: "One", value: 10, color: "#E38627" },
{ title: "Two", value: 15, color: "#C13C37" },
{ title: "Three", value: 20, color: "#6A2135" },
]}
/>
Its works at least for display labels, but you can customize it for showing percentage as well.
A good way to solve it is to provide a label function
<PieChart ...
label={props => { return props.data[props.dataIndex].label;}}
/>
You can also just provide label={true} but then it will show te value not the label in the data array.
Related
I am trying to plot stock data, but there are gaps in the graph where data for these time periods don't exist. How do I remove these gaps? I found that there is an update_xaxes function but I'm not sure how to apply it to my case.
My code:
import React, { useState, Component, useEffect } from "react";
import Plot from 'react-plotly.js';
export const Chart = () => {
return (
<div>
<Plot
data={[
{
x: data['dates'],
y: data['open_price'],
type: 'scatter'
}
]}
layout={{
autosize: false,
width: 1500,
height: 800,
xaxis: {
color: 'red',
rangebreaks: {
bounds: ["sat", "mon"],
values: ["2015-12-25", "2016-01-01"],
bounds: [17, 9], pattern: "hour"
}
}
}}
/>
</div>
)
}
react-ploty allows configuring the underlying ploty configuration through props. The data props you're already using accepts the same Traces Object than regular ploty. Therefore you can use rangebreaks as suggested by #r-beginners to achieve the desired effect.
xaxis: {
color: 'red',
rangebreaks: [
{ bounds: ["sat", "mon"] },
{
values: ["2019-12-25"]
},
{ bounds: [17, 9], pattern: "hour" }
]
}
I fixed it by making rangebreaks an array.
I am trying to make a react-select component but I keep running into an issue where if I change the high and width of the original react-select it throws everything else of center.
Here is the original react-select box code:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
export default function Example(){
return (
<Select options={options}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and a picture:
original react-select image
this is size of react-select box I want:
height: 20,
width: 118.5
modified react-select for correct height and width
as you can see it throws off the placement of the input box, placeholder, and icons.
Here is the code for the above image:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and this is how I have been trying to modify the component. This has gotten me somewhat close to the desired outcome but the input box sizing and icon placements are still off and sized weird:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
valueContainer: base => ({
...base,
height: 20,
minHeight: 20,
width:20,
alignItems: 'left',
}),
indicatorsContainer: base => ({
...base,
height: 20,
minHeight: 20,
alignItems: 'center',
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
react-select what I have been able to achieve with the posted code image 1
react-select what I have been able to achieve with the posted code image 2
I have been at this for hours and I just cannot seem to get everything to fit nice and neat into the react-select box when I resize it. Any help would be greatly appreciated.
I am trying to built a barchart component via "react-chartjs-2". I did pretty much paste my code from here: https://www.c-sharpcorner.com/article/create-different-charts-in-react-using-chart-js-library/.
This is how it looks:
import React from 'react';
import {Bar} from "react-chartjs-2";
const BarChart = () => {
const barChartData = {
labels: ["October", "November", "December"],
datasets: [
{
data: [8137119, 9431691, 10266674],
label: "Infected People",
borderColor: "#3333ff",
backgroundColor: "#547db4",
fill: true
},
{
data: [1216410, 1371390, 1477380],
label: "Deaths People",
borderColor: "#ff3333",
backgroundColor: "#f7813e",
fill: true
}
]
};
const barChart = (
<Bar
type="bar"
width={130}
height={50}
options={{
title: {
display: true,
text: "COVID-19 Cases of Last 3 Months",
fontSize: 15
},
legend: {
display: true, //Is the legend shown?
position: "bottom" //Position of the legend.
}
}}
data={barChartData}
/>
);
return barChart;
};
export default BarChart
Everything seems to be working fine, besides the fact that the options prop is not being recognized by the code.
Did anyone come across a similar issue and can help me out?
Update options prop as bellow.
options = {{
plugins: {
title: {
display: true,
text: "COVID-19 Cases of Last 3 Months"
},
legend: {
display: true,
position: "bottom"
}
}
}}
Problem:
I am creating a react application. There I am using recharts to draw a bar chart. But It is not drawing for the data set which is dynamically loaded.
My code is like this.
import React from "react";
import {
BarChart,
Bar,
Cell,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
let data = [];
let item;
const data1 = [
{
id: 'Page A', count: 2400,
},
{
id: 'Page B', count: 2210,
},
{
id: 'Page C', count: 2290,
},
{
id: 'Page D', count: 2000,
},
{
id: 'Page E', count: 2181,
},
{
id: 'Page F', count: 2500,
},
{
id: 'Page G', count: 2100,
},
];
const addItemToData = (el) => {
item = {
id: el.id,
count: 2,
};
data.push(item);
};
const OffenceStatusChart = ({ offences }) => {
if (Object.keys(offences) !== 0) {
Object.values(offences).map((el, index) =>
addItemToData(Object.values(el)[1])
);
}
if (data1) {
console.log(data1);
console.log(data)
}
return (
<React.Fragment>
{data? (<BarChart
width={800}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="id" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="count" fill="#8884d8" />
</BarChart>):null}
</React.Fragment>
);
};
export default OffenceStatusChart;
In here data1 array data set is working correctly but for data array data set it showing the chart as like this.
when I hover over the graph it shows like this.
In the inspect window is showing like this.
the data array is like this.
the data1 array is like this.
Both arrays are in same format but for the data array it is not drawing the bar char but for data1 array. I tried to realize so much what is this error but I was completely helpless so that is why I asked it here. So if someone can help me to solve this issue it really really grateful. Thank you
I'm trying to loop over a simple array of objects and display the content inside Text tag. The looping is being done but the actual content is not displayed on the screen.
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class App extends React.Component {
render() {
const initialArr = [
{
id: 1,
color: "blue",
text: "text1"
},
{
id: 2,
color: "red",
text: "text2"
},
{
id: 3,
color: "green",
text: "text3"
}
];
return (
<View style={styles.container}>
{initialArr.map((prop, key) => {
return (
<Text key={key}>{prop[1]}</Text>
);
})}
</View>
);
}
}
render() {
const initialArr = [
{ id: 1, color: "blue", text: "text1" },
{ id: 2, color: "red", text: "text2" },
{ id: 3, color: "green", text: "text3"}
];
var textInputComponents = initialArr.map((prop, key) => {
return (
<Text key={key}>{prop.text}</Text>
);
})
return (
<View style={styles.container}>
{textInputComponents}
</View>
);
}
Apart from John_mc's answer, instead of using inline mapping, you can also split the mapping operation, to improve readability and maintainability