{"id":60304,"date":"2024-02-28T18:22:11","date_gmt":"2024-02-28T12:52:11","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=60304"},"modified":"2024-02-28T18:22:11","modified_gmt":"2024-02-28T12:52:11","slug":"creating-bell-curve-using-react-chartjs-2","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/","title":{"rendered":"Creating Bell Curve using React-Chartjs-2"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p>React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn&#8217;t provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &#8220;Line&#8221; component for it.<\/p>\n<p><strong>Before we start writing, we need to install and import chartjs and react-chartjs-2\u00a0 :<\/strong><\/p>\n<div>\n<pre>import {\u00a0 Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Filler, Tooltip, Legend } from \"chart.js\";\r\n\r\nimport { Line } from \"react-chartjs-2\";<\/pre>\n<\/div>\n<div><\/div>\n<div><strong>Next, we&#8217;d need to register our chart:<\/strong><\/div>\n<div><\/div>\n<div>\n<pre>ChartJS.register(\r\n\r\n\u00a0 \u00a0 CategoryScale,\r\n\r\n\u00a0 \u00a0 LinearScale,\r\n\r\n\u00a0 \u00a0 PointElement,\r\n\r\n\u00a0 \u00a0 LineElement,\r\n\r\n\u00a0 \u00a0 Title,\r\n\r\n\u00a0 \u00a0 Tooltip,\r\n\r\n\u00a0 \u00a0 Legend,\r\n\r\n\u00a0 \u00a0 Filler,\r\n\r\n\u00a0 \u00a0 annotationPlugin \/\/ should be imported from \"chartjs-plugin-annotation\" only if we want to show values on graph (in our case here, percentage of data falling in each section)\r\n\r\n);<\/pre>\n<\/div>\n<div><\/div>\n<h3><strong>Creating Export function :<\/strong><\/h3>\n<div><\/div>\n<ol>\n<li><strong>Add data values<\/strong>: In our export function, create a state to save the data that needs to be shown on the map. If our bell curve needs to be divided into &#8220;n&#8221; sections, then the state will have &#8220;n+1&#8221; values, where the first value will always be 0.<\/li>\n<\/ol>\n<p>For 5 sections :<\/p>\n<div>\n<pre>\u00a0 \u00a0 const [ratingsData, setRatingsData] = useState([0,10,25,59,20,10]);<\/pre>\n<\/div>\n<div><\/div>\n<div>\u00a0 \u00a0 \u00a02.\u00a0<strong>Add options for graph<\/strong> :<\/div>\n<div><\/div>\n<div>\n<pre>const options = {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 responsive: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 plugins: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 tooltip: { enabled: false },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 hover: { mode: null },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 legend: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: \"top\"\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 title: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text: \"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 annotation: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 clip: false,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 annotations: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label1: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type: 'label',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xValue: 1,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yValue: ratingsData[1] + 20,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgba(255,255,255)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 content: [ratingsData[1] ? `${ratingsData[1]}%` : ''],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 9\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label2: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type: 'label',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xValue: 3,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yValue: ratingsData[2] + 20,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgba(255,255,255)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 content: [ratingsData[2] ? `${ratingsData[2]}%` : ''],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 9\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label3: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type: 'label',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xValue: 5,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yValue: ratingsData[3] + 20,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgba(255,255,255)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 content: [ratingsData[3] ? `${ratingsData[3]}%` : ''],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 9\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label4: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type: 'label',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xValue: 7,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yValue: ratingsData[4] + 20,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgba(255,255,255)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 content: [ratingsData[4] ? `${ratingsData[4]}%` : ''],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 9\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label5: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type: 'label',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xValue: 9,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yValue: ratingsData[5] + 20,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgba(255,255,255)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 content: [ratingsData[5] ? `${ratingsData[5]}%` : ''],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 9\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 datalabels: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: false,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 tension: 0.4,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 scales: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 x: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 grid: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: false\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 title: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 padding: { top: 35, left: 0, right: 0, bottom: 0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text: 'Normal Company Wide Ratings',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 weight: 'bold',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 12\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ticks: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 weight: 'bold',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 9\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 y: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 grid: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: false\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 title: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text: 'Number of Newers',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 font: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 weight: 'bold',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 12\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ticks: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: false\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 };<\/pre>\n<\/div>\n<p>3. <strong>Add Labels:<\/strong> To add labels on x-axis, create an array of &#8220;n&#8221; elements (with a nested array if a new line is required )<\/p>\n<div><\/div>\n<div>\n<div>\n<pre>const labels =\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 [\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 [[1], ['Needs'], [' Improvement']],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 [[2], ['Below'], [' Expectations']],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 [[3], ['Met'], [' Expectations']],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 [[4], ['Exceeded'], [' Expectations']],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 [[5], ['Outstanding']],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"\"];<\/pre>\n<\/div>\n<\/div>\n<div><\/div>\n<p>4. <strong>Create average points to be plotted on a graph:<\/strong> To create a curve, we need at least n*2 points on the graph, which can be done by creating average values.<\/p>\n<div>\n<div>\n<pre>const getAverageValue = (arr, index) =&gt; {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 let w = 0, x, y, z = 0;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 x = arr[index]\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 y = arr[index + 1]\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 return x &gt; y ? (y + ((x - y) \/ 2)) : (x + ((y - x) \/ 2))\r\n\r\n\u00a0 \u00a0 }<\/pre>\n<\/div>\n<\/div>\n<div>\n<pre>const labels1 =\r\n\r\n\u00a0 \u00a0 {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"0\": getAverageValue(ratingsData, 0),\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"0.5\": ratingsData[1],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"1\": getAverageValue(ratingsData, 1),\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"1.5\": ratingsData[2],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"2\": getAverageValue(ratingsData, 2),\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"2.5\": ratingsData[3],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"3\": getAverageValue(ratingsData, 3),\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"3.5\": ratingsData[4],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"4\": getAverageValue(ratingsData, 4),\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"4.5\": ratingsData[5],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"5\": 0\r\n\r\n\u00a0 \u00a0 }<\/pre>\n<\/div>\n<div><\/div>\n<p>5. <strong>Fill graph with colors<\/strong>: Create an array to add colors that must be filled in all graph sections.<\/p>\n<div>\n<div>\n<pre>var colors = [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"rgba(241,91,105,1)\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"rgba(254,226,130,1)\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"rgba(31,158,107,1)\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"rgba(79,162,255,1)\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \"rgba(64,56,255,1)\",\r\n\r\n\u00a0 \u00a0 ];<\/pre>\n<\/div>\n<\/div>\n<div><\/div>\n<div>\u00a0 \u00a0 \u00a0 6. <strong>Create a dataset for the graph<\/strong><\/div>\n<div>\n<div>\n<pre>let DataSet = [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label: ``,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data: [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fill: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 target: \"origin\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 above: colors[0],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label: ``,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data: [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fill: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 target: \"origin\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 above: colors[1],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label: ``,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data: [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['3'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fill: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 target: \"origin\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 above: colors[2],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label: ``,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data: [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['3'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['3.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['4']\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fill: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 target: \"origin\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 above: colors[3],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label: ``,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data: [\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['0.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['1.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['2.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['3'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['3.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['4'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['4.5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels1['5'],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fill: {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 target: \"origin\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 above: colors[4],\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderColor: 'rgb(255,255,255,0)',\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 ];<\/pre>\n<\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<p>7. <strong>Combining labels and datasets<\/strong>:\u00a0 Create an object for labels and datasets. Then pass options and this data object to our Line Chart<\/p>\n<div>\n<pre>const data = {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 labels: labels,\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 datasets: DataSet,\r\n\r\n\u00a0 \u00a0 };<\/pre>\n<\/div>\n<div><\/div>\n<div><\/div>\n<p>8. <strong>Return below from our export function<\/strong> :<\/p>\n<pre>&lt;Line options={options} data={data} ref={chartRef}<\/pre>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>After the final step, our graph will look like below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-60299\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/Screenshot-2024-02-11-170227-300x151.png\" alt=\"Blog image\" width=\"498\" height=\"251\" srcset=\"https:\/\/2thenew.xyz\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-11-170227-300x151.png 300w, https:\/\/2thenew.xyz\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-11-170227.png 618w\" sizes=\"auto, (max-width: 498px) 100vw, 498px\" \/><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn&#8217;t provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &#8220;Line&#8221; component for it. Before we start writing, we [&hellip;]<\/p>\n","protected":false},"author":1717,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":345,"footnotes":""},"categories":[3429,3038],"tags":[],"class_list":["post-60304","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-react-js"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn&#039;t provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &quot;Line&quot; component for it. Before we start writing, we\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Aastha Tyagi\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn&#039;t provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &quot;Line&quot; component for it. Before we start writing, we\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn&#039;t provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &quot;Line&quot; component for it. Before we start writing, we\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#article\",\"name\":\"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog\",\"headline\":\"Creating Bell Curve using React-Chartjs-2\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/aastha-tyagi\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"\\\/blog\\\/wp-ttn-blog\\\/uploads\\\/2024\\\/02\\\/Screenshot-2024-02-11-170227-300x151.png\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#articleImage\"},\"datePublished\":\"2024-02-28T18:22:11+05:30\",\"dateModified\":\"2024-02-28T18:22:11+05:30\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#webpage\"},\"articleSection\":\"Front End Development, React.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/#listItem\",\"name\":\"React.js\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/#listItem\",\"position\":2,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#listItem\",\"name\":\"Creating Bell Curve using React-Chartjs-2\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#listItem\",\"position\":3,\"name\":\"Creating Bell Curve using React-Chartjs-2\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/react-js\\\/#listItem\",\"name\":\"React.js\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/aastha-tyagi\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/aastha-tyagi\\\/\",\"name\":\"Aastha Tyagi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#authorImage\",\"url\":\"https:\\\/\\\/newersworld-sf-static.tothenew.net\\\/prod\\\/profilePicFolder\\\/a5b3f129-c63c-4673-94e7-b17730a37f89_5829-Aastha-Tyagi-PROFILEPICTURE.jpeg\",\"width\":96,\"height\":96,\"caption\":\"Aastha Tyagi\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/\",\"name\":\"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog\",\"description\":\"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn't provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the \\\"Line\\\" component for it. Before we start writing, we\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/creating-bell-curve-using-react-chartjs-2\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/aastha-tyagi\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/aastha-tyagi\\\/#author\"},\"datePublished\":\"2024-02-28T18:22:11+05:30\",\"dateModified\":\"2024-02-28T18:22:11+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog","description":"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn't provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the \"Line\" component for it. Before we start writing, we","canonical_url":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#article","name":"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog","headline":"Creating Bell Curve using React-Chartjs-2","author":{"@id":"https:\/\/2thenew.xyz\/blog\/author\/aastha-tyagi\/#author"},"publisher":{"@id":"https:\/\/2thenew.xyz\/blog\/#organization"},"image":{"@type":"ImageObject","url":"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/Screenshot-2024-02-11-170227-300x151.png","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#articleImage"},"datePublished":"2024-02-28T18:22:11+05:30","dateModified":"2024-02-28T18:22:11+05:30","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#webpage"},"isPartOf":{"@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#webpage"},"articleSection":"Front End Development, React.js"},{"@type":"BreadcrumbList","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog#listItem","position":1,"name":"Home","item":"https:\/\/2thenew.xyz\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/category\/react-js\/#listItem","name":"React.js"}},{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/category\/react-js\/#listItem","position":2,"name":"React.js","item":"https:\/\/2thenew.xyz\/blog\/category\/react-js\/","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#listItem","name":"Creating Bell Curve using React-Chartjs-2"},"previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#listItem","position":3,"name":"Creating Bell Curve using React-Chartjs-2","previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/category\/react-js\/#listItem","name":"React.js"}}]},{"@type":"Organization","@id":"https:\/\/2thenew.xyz\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/2thenew.xyz\/blog\/"},{"@type":"Person","@id":"https:\/\/2thenew.xyz\/blog\/author\/aastha-tyagi\/#author","url":"https:\/\/2thenew.xyz\/blog\/author\/aastha-tyagi\/","name":"Aastha Tyagi","image":{"@type":"ImageObject","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#authorImage","url":"https:\/\/newersworld-sf-static.tothenew.net\/prod\/profilePicFolder\/a5b3f129-c63c-4673-94e7-b17730a37f89_5829-Aastha-Tyagi-PROFILEPICTURE.jpeg","width":96,"height":96,"caption":"Aastha Tyagi"}},{"@type":"WebPage","@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#webpage","url":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/","name":"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog","description":"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn't provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the \"Line\" component for it. Before we start writing, we","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/2thenew.xyz\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/#breadcrumblist"},"author":{"@id":"https:\/\/2thenew.xyz\/blog\/author\/aastha-tyagi\/#author"},"creator":{"@id":"https:\/\/2thenew.xyz\/blog\/author\/aastha-tyagi\/#author"},"datePublished":"2024-02-28T18:22:11+05:30","dateModified":"2024-02-28T18:22:11+05:30"},{"@type":"WebSite","@id":"https:\/\/2thenew.xyz\/blog\/#website","url":"https:\/\/2thenew.xyz\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/2thenew.xyz\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog","og:description":"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn't provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &quot;Line&quot; component for it. Before we start writing, we","og:url":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/","og:image":"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"Creating Bell Curve using React-Chartjs-2 | TO THE NEW Blog","twitter:description":"Introduction React-Chartjs-2 or Chartjs-2 is a powerful charting library. We can easily create lines, bars, and pie charts, but it doesn't provide any direct feature to create a bell curve. In this post, we will learn to create a bell curve using React-Chartjs-2 by using the &quot;Line&quot; component for it. Before we start writing, we","twitter:image":"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"60304","title":null,"description":null,"keywords":[],"keyphrases":{"focus":[],"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-65e03693999dd","slug":"article","graphName":"Article","label":"Article","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2024-02-19 12:05:23","updated":"2024-02-29 07:47:31","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.xyz\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.xyz\/blog\/category\/react-js\/\" title=\"React.js\">React.js<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCreating Bell Curve using React-Chartjs-2\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/2thenew.xyz\/blog"},{"label":"React.js","link":"https:\/\/2thenew.xyz\/blog\/category\/react-js\/"},{"label":"Creating Bell Curve using React-Chartjs-2","link":"https:\/\/2thenew.xyz\/blog\/creating-bell-curve-using-react-chartjs-2\/"}],"_links":{"self":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts\/60304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/users\/1717"}],"replies":[{"embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/comments?post=60304"}],"version-history":[{"count":3,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts\/60304\/revisions"}],"predecessor-version":[{"id":60521,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts\/60304\/revisions\/60521"}],"wp:attachment":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/media?parent=60304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/categories?post=60304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/tags?post=60304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}