I am building a covid-19 tracker, but when data is displayed on the graph using react charts title is coming out to be undefined
This is my chart code
<div >
{data?.length > 0 && (
<Line
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
},
],
}}
options={options}
/>
)}
</div>
These are my option parameters
const options = {
legend: {
display: false,
},
elements: {
point: {
radius: 0,
},
},
maintainAspectRatio: false,
tooltips: {
mode: "index",
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return numeral(tooltipItem.value).format("+0,0");
},
},
},
scales: {
xAxes: [
{
type: "time",
time: {
format: "MM/DD/YY",
tooltipFormat: "ll",
},
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return numeral(value).format("0a");
},
},
},
],
},
};
Although legend is set to false I am getting an error.
Please tell me where I am going wrong, that will be helpful.
Image of a chart.
You need to pass the label property here
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
label: "your label" // <-- pass this
},
],
}}
Related
How to correctly display large amount of data on ReactApexChart , Bar Chart. At image below, I am passing 552 entries. When amount of entries under 50 everything displays just fine, above this number starts look like a hell and performance is getting low. I am using React Js Class Component.
this.state = {
series: [{
name: props.name,
data: props.chartValue,
}, ],
options: {
grid: {
row: {
colors: ["#D6EAF8 ", "#D6EAF8"],
},
},
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
colors: {
ranges: [{
from: 0,
to: Number.MAX_VALUE,
color: "#29ABE2",
}, ],
backgroundBarColors: [],
backgroundBarOpacity: 1,
backgroundBarRadius: 0,
},
},
},
dataLabels: {
enabled: true,
formatter: function(val) {
return val + ` min`;
},
offsetX: 15,
style: {
fontSize: "12px",
colors: ["#FFFFFF"],
},
},
xaxis: {
categories: props.ids,
labels: {
style: {
colors: [],
fontSize: "15px",
fontWeight: 500,
},
},
},
yaxis: {
categories: props.differenceInTime,
labels: {
style: {
colors: [],
fontSize: "15px",
fontWeight: 500,
},
},
axisTicks: {
show: true,
borderType: "solid",
color: "#78909C",
width: 10,
offsetX: 0,
offsetY: 0,
},
},
},
};
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" />
</div>
Here is 552 entries
why put max integer for the colors? That could be a performance issue
ranges: [{
from: 0,
to: Number.MAX_VALUE,
color: "#29ABE2",
}
I have a chart component called genStarts whose view depends on the visible data of the following chart (singleChart). I'm using the onZoomComplete and onPanComplete options to insert my getVisibleValues function so that genStarts can be updated on zooms and pans. However, I have no way to get the currently visible values when the page first starts up. My getVisibleValues function does not work outside of the chartStyle object, and I haven't found a chart option that executes on startup.
In other words, my genStarts graph is only populated when SingleChart is zoomed or panned but I want it to be populated immediately.
const SingleChart = React.memo(({ setVisible }) => {
function getVisibleValues({ chart }) {
setVisible(chart.scales.x.ticks);
}
const chartStyle = {
options: {
animation: false,
maintainAspectRatio: false,
responsive: true,
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true,
modifierKey: "shift",
},
pinch: {
enabled: true,
},
enabled: true,
drag: true,
mode: "x",
onZoomComplete: getVisibleValues,
},
pan: {
enabled: true,
mode: "x",
speed: 2,
onPanComplete: getVisibleValues,
},
mode: "xy",
},
legend: {
display: false,
},
},
scales: {
y: {
type: "linear",
display: "true",
position: "left",
grid: {
drawBorder: true,
color: "#000000",
},
ticks: {
beginAtZero: true,
color: "#000000",
},
title: {
display: yAxisLabel != "",
text: yAxisLabel,
},
},
x: {
max: 9,
grid: {
drawBorder: true,
color: "#00000",
},
ticks: {
beginAtZero: false,
color: "#000000",
},
},
},
},
};
// ... some code to get chartData
return (
<div>
<Line
data={chartData}
options={chartStyle.options}
width={20}
height={195}
/>
</div>
);
});
export default SingleChart;
You can make use of the animations, they have a property to check if its the first time they have fired, although since you dont want animations you will need to set the main one to a verry low number and at least the tooltip to false and the transition duration of active elements to 0.
const getVisibleValues = ({
chart
}) => {
console.log(chart.scales.x.ticks.map(el => ({
value: el.value,
label: el.label
}))) // Map because stack console prints whole circular context which takes long time
}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
animation: {
onComplete: (ani) => {
if (ani.initial) {
getVisibleValues(ani)
}
},
duration: 0.0001
},
transitions: {
active: {
animation: {
duration: 0
}
}
},
plugins: {
tooltip: {
animation: false
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I've been trying to figure out how to create a line chart that plots data in this
format {x:time,y:data}.
Basically exactly like this post.
How can I create a time series line graph in chart.js?
Problem is it that i can't manage to get it to work using the react-chartjs2 library.
Below is my code and a link to a image of my graph.
class Grafer extends Component {
constructor(props) {
super(props);
this.state = {};
}
data = {
datasets: [
{
label: 'time-data',
data: [
{ x: '2021-08-21 18:37:39', y: 2 },
{ x: '2021-08-22 18:39:39', y: 3 },
{ x: '2021-09-25 18:44:39', y: 1 },
],
borderColor: 'rgba(255,99,132,0.8)',
tension: 0.3,
},
],
};
options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
scales: {
xAxes: [
{
type: 'time',
distribution: 'linear',
},
],
title: {
display: false,
},
},
},
};
render() {
return (
<div>
<Line data={this.data} options={this.options} />
</div>
);
}
}
export default Grafer;
image to see my line-graph
I'm looking to create a drilldown using the CChartBar available in the CoreUI documentation here: https://coreui.io/react/docs/3.3/components/CCharts/
I need to be able to get the month from the bar that is clicked, and when the bar is clicked, it needs to take the user to another page. How do I get the information? How to I make each bar clickable to send the user to the table page?
Currently here is the html
<div className="chart-container">
<CChartBar
datasets={[
{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]}
labels={dateLabels}
onClick={(event) => drillDown(event)}
options={{
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}}
/>
I would like to be able to click on the bar, and get the data that is being charted, so I can pass the month to another page.
You can use the onClick function for this:
var options = {
type: 'bar',
data: {
labels: ["December 2020", "Januarie 2021", "Feb 2021", "March 2021", "April 2021", "May 2021"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 3, 3],
backgroundColor: 'pink'
}]
},
options: {
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
<div className = "chart-container" >
<CChartBar
datasets = {
[{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]
}
labels = {
dateLabels
}
onClick = {
(event) => drillDown(event)
}
options = {
{
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}
}
/>
``
Image
This is my current result bar
But I need the content to be collapsed when clicked, the content is similar to the picture below
Give a link to some library or some solution
in advance thankful
Source
<HorizontalBar
data={{
barPercentage: 0.8,
labels: [
'Label1', //THIS ARR FOR ONLY FOR EXAMPLE
'Label2',
'Label3',
'Label4',
'Label5',
'Label6',
'Label7',
'Label8'
],
datasets: [{
legend: {
display: false
},
label: '',
data: [7305064, 7305064, 5294903, 1313290, 600300, 96571, 617650, -200000],
fill: false,
borderColor: "#18B9AB",
backgroundColor: '#7facf5',
hoverBackgroundColor: '#609af7',
barThickness: 20
}]
}}
options={{
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: {
datalabels: {
color: '#EFEFEF',
}
}
}}/>