{"id":60304,"date":"2024-02-28T18:22:11","date_gmt":"2024-02-28T12:52:11","guid":{"rendered":"https:\/\/www.tothenew.com\/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:\/\/www.tothenew.com\/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 decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-60299\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/Screenshot-2024-02-11-170227-300x151.png\" alt=\"\" width=\"498\" height=\"251\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/02\/Screenshot-2024-02-11-170227-300x151.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/02\/Screenshot-2024-02-11-170227.png 618w\" sizes=\"(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":310},"categories":[3429,3038],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60304"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1717"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60304"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60304\/revisions"}],"predecessor-version":[{"id":60521,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60304\/revisions\/60521"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}