I have a big issue with my react app. I have several pie charts. But I have a displaying problem. In some browsers, they are working but in others, they are not working. For example, when I try them in two exactly same phones & browsers they are working one of them and not working in the other one.
I think this problem is not related to browsers, accounts, devices but I cannot find out what is wrong with that?
Google charts and recharts not working in pie chart but my Google bar chart is working.
When I try to display pie chart with dummy data it works. I think there is a problem with my data.
api:
[{"title":"TOPLAM DÖNEN VARLIKLAR","value1":0.8099237254874144,"value2":0.6716967762970417},{"title":"TOPLAM DURAN VARLIKLAR","value1":0.19007627451258552,"value2":0.3283032237029582},{"title":"Toplam Kısa Vadeli Yükümlülükler","value1":0.6453778969419264,"value2":0.42796665648321913},{"title":"Toplam Uzun Vadeli Yükümlülükler","value1":0.12545336756938238,"value2":0.15300843856942245},{"title":"TOPLAM ÖZKAYNAKLAR","value1":0.22916873548869124,"value2":0.41902490494735845}]
react
export function DonutValue({donut, comp, start, end}) {
const colorsheme = [
'#2b5818', '#50d741',
'#7d99e7', '#355dd4', '#083edd'];
const valr = [
['a', 'b'],
[capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value1.toLocaleString() * 100, 10)],
[capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value1.toLocaleString() * 100, 10)]
];
if (end == 5) {
valr.push(
[capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value1.toLocaleString() * 100, 10)]
);
}
const vall = [
['a', 'b'],
[capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value2.toLocaleString() * 100, 10)],
[capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value2.toLocaleString() * 100, 10)]
];
if (end == 5) {
vall.push(
[capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value2.toLocaleString() * 100, 10)]
);
}
return <Row>
<Col sm="12" className="text-center">
<div style={{width: '100%'}}>
<ResponsiveContainer width={'99%'} height={300}>
<Chart
chartType="PieChart"
data={valr}
options={{
backgroundColor: 'transparent',
title: '',
pieHole: 0.6,
slices: [
{
color: colorsheme[start + 0],
},
{
color: colorsheme[start + 1],
},
{
color: colorsheme[start + 2],
},
],
legend: {
position: 'bottom',
alignment: 'center',
textStyle: {
color: '#ffdc5a',
fontSize: 12
},
},
border: {
color: 'red',
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
top: 0,
width: '100%',
height: '60%',
}
}}
width={'100%'}
height={'400px'}
legend_toggle
/>
</ResponsiveContainer>
</div>
<h4 style={{margin: '0 5px', padding: 0}}>
{comp[1].value}
</h4>
</Col>
</Row>
}
The problem is in parseInt method. I cannot figure out why but when I delete it, the chart worked.
import React from 'react'
import { Doughnut } from 'react-chartjs-2'
function BillingChart() {
return (
<div>
<Doughnut
data={{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
}}
height={400}
width={600}
/>
</div>
)
}
export default BillingChart
Related
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.
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',
},
});
By default, Victory scatters all bars across the chart:
And the code:
<VictoryChart
width={650}
theme={VictoryTheme.material}
domainPadding={30}
>
<VictoryAxis
tickFormat={data.map(x => x.title)}
style={{
axis: { stroke: 'rgb(236, 239, 241)', strokeWidth: 1, strokeDasharray: [10, 5]},
grid: { stroke: false },
ticks: { stroke: 'none', size: 0 },
tickLabels: { fontSize: 12, padding: 15 }
}}
/>
<VictoryAxis
crossAxis={false}
domain={[0, 2000]}
dependentAxis
tickFormat={x => x}
style={{
axis: { stroke: false },
axisLabel: { fontSize: 12, padding: 50 },
ticks: { stroke: 'none', size: 0 },
tickLabels: { size: 0, padding: 20 }
}}
/>
<VictoryBar
data={dataset}
y="value"
x="title"
style={{
data: { fill: ({ datum }) => datum.color },
}}
/>
</VictoryChart>
How to center them and make middle an entry point for scattering? I'm looking for something like an alignment prop for root chart component
I m using Heat Map of Highcharts library in my app and i have begin to face a weird scenario. The map does not show some rows data, plz look at the following screen shot:
I see data in the column when I Inspect Element a cell. I noticed that all the row cell's opacity is set to 0. Changing it to 1 in chrome shows the item.
My JS code is as follows:
$highchart1.highcharts({
exporting: false,
credits: false,
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 120
},
title: {
align: 'left',
text: 'Some chart title',
style: { color: 'red' }
},
xAxis: {
categories: pillarOrClusters,
labels: {
style: { color: '#000' }
}
},
yAxis: {
categories: locations,
title: summary.locationType,
labels: {
style: { color: '#000' }
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> has <br><b>' +
this.point.value + '</b> items in <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Pillars per' + summary.locationType, // Loaded from Service
borderWidth: 1,
data: data,
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Why would the map set opacity to 0 for entire row elements?
This issue was being raised only in Chrome and sometimes in IE because of insufficient height of the chart. I am calculating chart height as per items on yAxis as follows:
//locations is an array of strings to be shown on yAxis
var chartHieght = locations.length * 35;
if (chartHieght < 350) chartHieght = 350;
And then set it as follows:
chart: {
type: 'heatmap',
marginTop: 40,
height: chartHieght,
marginBottom: 130,
backgroundColor: '#F0F0F0',
borderColor: '#E5E5E5',
borderWidth: 2,
borderRadius: 4,
events: {
load: function () {
//THIS WAS A DIRTY WORKAROUND I WAS USING TO MAKE IT RENDER PROPERLY
/* $(".highcharts-data-labels g").attr("opacity", 1); */
}
}
}
Turning the height calculation as locations.length * 30 begins to render the same issue in Chrome. locations.length * 25 will cause the issue in IE as well.
Hope it helps someone.
This question already has an answer here:
Highcharts Donut Chart text in center change on hover
(1 answer)
Closed 8 years ago.
I am trying to dynamic update the text in the centre of my piechart when my tooltip mouses over the series.
By using the formatter inside the tooltip field of the chart I am able to call a separate function but it seems like the text is not updating.
Here is my fiddle Pie Chart
$(function () {
var chartTitle = "Text in the Pie";
var colors = Highcharts.getOptions().colors;
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie'
},
title: {
text: 'Pie Pie Pie',
y: 20,
verticalAlign: 'top'
},
tooltip: {
//pointFormat: '{series.name}: <b>{point.percentage}%</b>'
formatter: function () {
chartTitle = this.series.name + '/n' + this.point.percentage.toFixed(2) + '%';
refreshText(this);
return '<b>' + this.series.name + '</b>: ' + this.point.percentage;
}
},
plotOptions: {
pie: {
borderColor: 'white',
innerSize: '60%',
dataLabels: {
enabled: false
}
}
},
series: [{
data: [{
y: 59,
color: '#005C7F',
name: 'Chrome'
}, {
y: 41,
color: '#4CCDFF'
}, {
y: 61,
color: '#00B8FF'
}, {
y: 52,
color: '#26677F'
}],
size: '80%',
innerSize: '60%'
}]
},
function (chart1) { // on complete
var xpos = '50%';
var ypos = '50%';
var circleradius = 130;
// Render the circle
chart1.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#0093CC'
}).add();
// Render the text
//chart1.renderer.text(chart1.series[0].data[0].percentage.toFixed(2) + '%', 270, 200).css({
chart1.renderer.text(chartTitle + '%', 230, 200).css({
width: circleradius * 2,
color: '#FFFFFF',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
}
);
function refreshText(chart1) {
alert("inside refreshText() function");
var xpos = '50%';
var ypos = '50%';
var circleradius = 130;
// Render the circle
chart1.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#0093CC'
}).add();
chart1.renderer.text(chartTitle + '%', 270, 200).css({
width: circleradius * 2,
color: '#FFFFFF',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
}
});
FYI, you were calling refreshChart(this) in your tooltip. You just needed to call refreshChart(chart1) to get the refresh to work, although you weren't clearing out the renderer.
tooltip: {
//pointFormat: '{series.name}: <b>{point.percentage}%</b>'
formatter: function () {
chartTitle = this.series.name + '/n' + this.point.percentage.toFixed(2) + '%';
refreshText(chart1);
return '<b>' + this.series.name + '</b>: ' + this.point.percentage;
}
},
http://jsfiddle.net/2qV9K/