We Keep Coding

Chart line not appearing in a semi log chart using chart.js

I am using react-chartjs-2 to create a semi log chart using some simple data.
I tried many examples but in the final chart the line isn't drawn nor I see any error in the browser console.
I am using Next.js & Tailwind CSS for this project.
I also tried using the techniques described in the time series charts but those also don't work
I have figured out how to create the axis and ticks , now how do I draw the line ?
Here is my code.
index.js
import {
Chart as ChartJS,
CategoryScale,
LogarithmicScale,
LogarithmicScaleOptions,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";
ChartJS.register(
LogarithmicScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const options = {
scales: {
x: {
display: true,
type: "logarithmic",
min: 0.000001,
max: 1,
},
y: {
display: true,
min: 400,
max: 2500,
},
},
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "5W-10R",
},
},
};
const vmax = [2000, 1750, 1500, 1250, 1000, 750, 500];
const tm = [
0.0000125, 0.00001633, 0.00002222, 0.000032, 0.00005, 0.0002, 0.0008,
];
export const data = {
tm,
datasets: [
{
label: "Dataset 1",
data: vmax,
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
],
};
export default function Home({}) {
return (
<div className="">
<div className="flex flex-col items-center justify-center min-h-screen py-2">
<main className="flex flex-col items-center w-full flex-1 px-10 ">
<Line options={options} data={data} />
</main>
</div>
</div>
);
}
Result:

You don't pass an option to the labels array, you pass the tm variable which means it will use that as a key, you need to pass it as:
const data = {
labels: tm,
datasets: []
}

React Chartjs is not showing any output

React
As you can see JSX code for Bar Chart, suppose to show a bar chart with data values. But it doesn't show any output or error as well
JSX
import React from 'react'
import { Bar } from 'react-chartjs-2';
export default function BarChart() {
var data = {
labels: ["Home", "Product", "Cart"],
datasets: [
{
label: ' ',
data: [38, 75, 25],
borderColor: ['rgb(82,134,163)'],
backgroundColor: ['rgb(82,134,163)'],
pointBackgroundColor: 'rgb(82,134,163)',
pointBorderColor: 'rgb(82,134,163)'
}
]
}
return (
<div>
<Bar
Data={data}
height={400}
width={600}
options={{
maintainAspectRatio: false
}}
/>
</div>
)
}

The prop for passing the data to the Bar component should be data instead of Data:
<Bar
data={data}
height={400}
width={600}
options={{
maintainAspectRatio: false
}}
/>
As a result, the component was behaving as it was not receiving any data.

react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?

I am implementing one doughnut chart in react js by using react-chart.js-2 chart.js, but I want to customize it according to my requirements, I have done already some customization, but one I need to do is, to make the width of chart thin.
Current Image
enter image description here
Required Image
enter image description here
import React from "react";
import { Doughnut } from "react-chartjs-2";
const data = {
datasets: [
{
data: [8, 25, 2, 4, 3, 21, 2],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"black",
"blue",
"red",
"purple",
],
borderColor: "transparent",
},
],
};
function App() {
return (
<div className="App">
{" "}
<h2>Doughnut Example</h2>
<Doughnut
data={data}
options={{
responsive: true,
maintainAspectRatio: false,
tooltips: false,
height: "2",
}}
/>
</div>
);
}
export default App;

Edit cutout property in options
let options = {
responsive: true,
cutout:"80%",
legend: {
display: false,
},
layout: {
padding: 10,
},
};

You need to define the cutoutPercentage option inside the chart options as follows:
<Doughnut
data={data}
options={{
responsive: true,
cutoutPercentage: 80,
...
}}
/>
cutoutPercentage: The percentage of the chart that is cut out of the middle (default value is 50).

How to change the width of the bar in bar chart in react-charts?

I am implementing the bar chart and I am stuck with the following thing:
Sometimes, the width of the bar is too much, it looks like the graph is broken as it overlaps with the axes. What approach should I follow to keep the bar width in control according to data?
Here is the data sample and how the graph looks like. I have added the code sandbox also.
const dataOne = [
{
label: Translate.string('Events'),
data: [[2018, 3], [2019, 2], [2020, 1]],
},
];
Let me know if I have to provide any other information. I have posted this issue here also.

The attribute is actually stored in scales.xAxes ("Options for xAxes" table).
So you just have to edit your chart this way :
var options = {
scales: {
xAxes: [{
barPercentage: 0.4
}]
}
}
And this will be good for some references but particularly see this too

After diving deep in the library, I found that there is a bug in calculating CSS transforms for rect elements for bar.
I was not able to found a full-proof way of solving this but I came up with a workaround (adding null values in the start and end of the data) which is working well for my use case and may help someone else to solve their problem so thought of adding the workaround as an answer.
import moment from "moment";
import React from "react";
import { Chart } from "react-charts";
import "./styles.css";
export default function App() {
const dataone = React.useMemo(
() => [
{
label: "Event",
data: [
[moment(2010, "YYYY"), null],
[moment(2011, "YYYY"), 3],
[moment(2012, "YYYY"), 2],
[moment(2013, "YYYY"), 1],
[moment(2015, "YYYY"), 3],
[moment(2016, "YYYY"), null]
]
}
],
[]
);
const options = {
scales: {
xAxes: [
{
barPercentage: 0.4
}
]
}
};
const series = { type: "bar" };
const axes = React.useMemo(
() => [
{ primary: true, type: "time", position: "bottom" },
{ type: "linear", position: "left" }
],
[]
);
return (
<>
<div
style={{
width: "600px",
height: "300px"
}}
>
<Chart
data={dataone}
options={options}
axes={axes}
series={series}
tooltip
/>
</div>
</>
);
}

Is it possible to remove the border between the segments but leave the border around the pie chart in react-chartjs-2?

I am using react-chartjs-2 pie chart and I'd like to remove the lines(borders) between slices BUT I want to show the border around the chart. Could someone tell me the way to do this ? Thanks in advance!
my code is like that now:
import {Pie} from 'react-chartjs-2';
class App extends Component {
render() {
return (
<div className='pieChartPositioner'>
<Pie
height={36}
width={36}
data={{
datasets: [{
data: [20 , 80],
backgroundColor: ['red', 'green'],
borderColor: 'black',
borderWidth: 2,
}],
}
}/>
</div>
)
}
}

You need to set the borderWidth as 0 in the pie's arc configuration which by default is set to 2.
The arc configuration can be used in polar area, doughnut and pie
charts and is set under the elements key.
You can change it by either:
1. Setting the global arc options
Chart.defaults.global.elements.arc.borderWidth = 0;
2. Or through the options object that you passed to the chart
var options = {
elements: {
arc: {
borderWidth: 0
}
}
};
See docs for more info.

I am writing this because marked answer didn't help me, I guess it was changed in meanwhile.
You need to set borderWidth inside datasets that you are passing to data prop.
Example:
const data = {
datasets: [{
borderWidth:0,
data: [9, 1],
backgroundColor: ['#ffffff', '#000000'],
}],
};
return (
<Pie data={data} />
)