I am working on React Google Charts to create few graphs for a project. The problem that I am facing 2 problems.
1- The Charts are re-rendering constantly in DOM. DOM constantly updating due to charts re
re-rendering
2- The tooltips are stretched on the full width of chart. Tooltip fully stretched
Here is my code for the Area Chart (Heart Rate).
import React from "react";
import { Chart } from "react-google-charts";
export const AreaChart = ({ data }) => {
const options = {
title: "Heart Rate",
hAxis: { maxValue: 500, minValue: 0, baselineColor: "transparent" },
vAxis: {
gridlines: { color: "grey", minSpacing: 10, count: 1 },
minorGridlines: { color: "grey", count: 0 },
maxValue: 120,
minValue: 0,
baselineColor: "transparent",
},
curveType: "function",
legend: { position: "none" },
chartArea: { width: "80%", height: "90%" },
areaOpacity: 0.2,
colors: ["red", "green"],
};
return (
<Chart
chartType="AreaChart"
width="100%"
height="90px"
data={data}
options={options}
/>
);
};
Note: Everything is Working perfectly on the React Google Charts' real time graphing engine with same options/settings and data.
Related
I'm having a weather website where you can type city's name and it will display the weather data from OpenWeatherAPI. I also have a chart made using Chart.js. There's however a problem, when I search other cities, the chart updates but when I hover the cursor over some points each previous chart suddenly appears instead of the current chart with every new mouse hover. I tried using the update() and destroy() method before updating the chart but it doesn't seem to help.
I have my canvas object inside a div called chartContainer and it's the only child of chartContainer div.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: arrayDates,
datasets: [
{
borderColor: '#69CDE6',
backgroundColor: 'rgba(12, 176, 216, 0.1)',
data: arrayTemps
}
]
},
options:{
title: {
display: true,
text: `Prognoza pogody dla ${citynCountry}`,
fontSize: 16,
fontStyle: 'bold'
},
legend: {
display: false,
},
scales:{
yAxes:[{
display: true,
scaleLabel: {
display: true,
labelString: 'Temperatura w °C',
fontSize: 16
},
ticks: {
fontSize: 17
}
}],
xAxes:[{
display: true,
scaleLabel: {
display: true,
labelString: 'Data i godzina',
fontSize: 16
},
ticks: {
fontSize: 17
}
}]
}
}
});
myChart.update();
I looks like you're creating new charts within the same canvas each time the data changes. You should better create the chart once only and then update its data.labels, data.datasets.data and options.title each time the data for other cities are available. After all data and options are updated, you need to invoke myChart.update().
Please take a look at the following answers that deal with similar issues:
https://stackoverflow.com/a/61025107/2358409
https://stackoverflow.com/a/61576710/2358409
I'm trying to use ZingChart. Trying to build gauge widget. Question is for those who worked with zingChart. How to configure width and height of space around chart. So here is what i'm saying about:
White container is a div with 100% width and height. All yellow space is plotarea of the zingChart, and in the center is gauge.
I want to cut all yellow space at the top and bottom around gauge. How to configure that?
Here is my chart config in react:
import React from 'react'
import './PlanGauge.sass'
import 'zingchart/es6'
import ZingChart from 'zingchart-react'
import WidgetTile from '../WidgetTile/WidgetTile'
function PlanGauge({ title }) {
const widgetConfig = {
minValue: 0,
maxValue: 150000,
currentValue: 100000,
}
const chartConfig = {
type: 'gauge',
'scale-r': {
aperture: 180,
values: `${widgetConfig.minValue}:${widgetConfig.maxValue}`,
ring: {
size: 12,
'background-color': '#F2F4F6',
tick: {
visible: false,
},
},
center: {
visible: false,
},
tick: {
visible: false,
},
item: {
//Scale Label Styling
visible: false,
},
},
plot: {
size: '100%',
},
series: [
{
values: [widgetConfig.currentValue],
'background-color': '#000',
'border-color': 'red',
indicator: [4, 4, 0, 0, 0.9],
},
],
plotarea: {
marginTop: 0,
marginBottom: 0,
backgroundColor: 'yellow',
},
}
return (
<WidgetTile title={title}>
<ZingChart data={chartConfig} />
</WidgetTile>
)
}
export default PlanGauge
Please set padding in the ZingChart configuration's plot object to control the area around it. The Plot object controllers the styling of the chart.
Set margin in the ZingChart configuration.
plotarea: {
margin: '0 0 0 0',
},
It works for me.
My Chart.js pie is working fine, but when I add the legend option, it disappears, much to my dismay. Other options like title and animation work pretty well, only the legend options ruins the pie. I have looked at the code thoroughly, but can't figure out what I'm not doing right. Below is my code:
if ( $('#broadsheet_piechart_sample').length ) {
var ctx = document.getElementById("broadsheet_piechart_sample");
var data = {
datasets: [{
data: [10, 20, 30, 40, 50],
backgroundColor: ['#455C73', '#9B59B6', '#BDC3C7', '#26B99A', '#3498DB'],
}],
labels: ['Dark Gray', 'Purple', 'Gray', 'Green', 'Blue']
};
//options
var options = {
title: {
display: true,
position: "top",
text: "Test Pie Chart",
fontSize: 18,
fontColor: "#111"
},
animation: {
duration: 0
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
var broadsheet_piechart_sample = new Chart(ctx, {
data: data,
type: 'pie',
options: options
});
}
You are may using an old version which can cause this issue.
Please upgrade to the latest CharJs version (2.7.3).
Here is what I did for example : example Just exactly what you did.
sliceVisibilityThreshold: .05
shows clubs all categories in pie chats below 5% under other. Is there a way to see the merged categories on hover over 'other'.
To display small values in use pie chart: sliceVisibilityThreshold: 0 in the options.
var options = {
title: 'My Daily Activities',
fontSize: 11,
backgroundColor: 'transparent',
width: "100%",
sliceVisibilityThreshold: 0,
legend: { textStyle: { fontSize: 12 } },
height: 400,
};
See in: https://jsfiddle.net/L03jf90s/2/
I am using line chart via google chart api, and stuck with a problem.
When i am using arrayToDataTable everything works fine and looks okay.
https://jsfiddle.net/Ljz49gqb/
But when i am filling data object, and populate it with data needed, it's being like cut from the right side.
https://jsfiddle.net/Ljz49gqb/1/
Options in this examples, are the same
var options = {
height: 245,
width: '100%',
chartArea: {top: 15, left: 30, width: '100%', height: 190},
areaOpacity: 0.1,
tooltip: {trigger: 'both'},
legend: 'none',
pointSize: 5,
hAxis: {
format: 'MM-dd',
gridlines: {
color: '#fff',
count: 365 /* \_(ツ)_/ */
},
textStyle: {
fontSize: 11
}
},
vAxis: {
gridlines: {
color: '#dedede',
count: 5
},
viewWindow: {
min: 0
},
textStyle: {
fontSize: 11
},
baselineColor: 'dedede'
}
};
p.s. 100% width must left, because page is dynamic and used in mobile.
UPDATE
Displays bad even so
https://jsfiddle.net/Ljz49gqb/2/
UPDATE
It was not about dataTable, it was about Date type in google chart api, and 100% width. (Just to help find this topic in google)
Solved with
chartWrapWidth = document.getElementById('chart_div').offsetWidth;
options.chartArea.width = chartWrapWidth - 45;
https://jsfiddle.net/Ljz49gqb/4/