title: chartjs doesn't render dates properly
body: <p>I made a custom chartjs component in reactjs and want to render dates in xAxes and numbers from -1 to 1 in yAxes but it renders data not in a proper way.
  <a href="https://i.stack.imgur.com/Orp6n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Orp6n.png" alt="this is the output I get from the component below" /></a></p>
  <pre class="lang-js prettyprint-override"><code>
  import React, { useRef, useEffect } from &quot;react&quot;;
  
  import Chart from &quot;chart.js&quot;;
  
  const ChartComponent = ({ data, label, min, max }) =&gt; {
      const canvasRef = useRef(null);
  
      useEffect(() =&gt; {
          const canvasObj = canvasRef.current;
          const context = canvasObj.getContext(&quot;2d&quot;);
  
          new Chart(context, {
              type: &quot;line&quot;,
              data: {
                  datasets: [
                      {
                          label: label,
                          backgroundColor: &quot;transparent&quot;,
                          data: data,
                      },
                  ],
              },
              options: {
                  scales: {
                      xAxes: [
                          {
                              type: &quot;time&quot;,
                              distribution: &quot;linear&quot;,
                              time: {
                                  unit: &quot;month&quot;,
                                  displayFormats: {
                                      quarter: &quot;YYYY mm dd&quot;,
                                  },
                              },
                          },
                      ],
                      yAxes: [
                          {
                              ticks: {
                                  suggestedMax: max,
                                  suggestedMin: min,
                              },
                          },
                      ],
                  },
              },
          });
      }, [data, label, min, max]);
  
      return &lt;canvas ref={canvasRef}&gt; &lt;/canvas&gt;;
  };
  
  export default ChartComponent;
  
  </code></pre>
  <p>and I'm passing the data like this to the component</p>
  <pre class="lang-js prettyprint-override"><code>&lt;ChartComponent
      min={-1}
      max={1}
      label=&quot;date&quot;
      data={[
          {
              x: &quot;30/03/2018&quot;,
              y: 0.1158,
          },
          {
              x: &quot;24/09/2018&quot;,
              y: 0.1975,
          },
  
          {
              x: &quot;23/12/2018&quot;,
              y: 0.1913,
          },
          {
              x: &quot;23/03/2019&quot;,
              y: 0.2137,
          },
      ]}
  /&gt;;
  </code></pre>
  <p>I have to metion that I have done the same thing and that is working alright this is example below</p>
  <pre class="lang-js prettyprint-override"><code>&lt;ChartComponent
      min={1270}
      max={1272}
      label=&quot; مساحت دریاچه&quot;
      data={[
          {
              x: &quot;04/02/2017&quot;,
              y: 1270.7,
          },
  
          {
              x: &quot;06/26/2017&quot;,
              y: 1270.74,
          },
  
          {
              x: &quot;09/19/2017&quot;,
              y: 1270.31,
          },
          {
              x: &quot;12/18/2017&quot;,
              y: 1270.28,
          },
          {
              x: &quot;06/16/2018&quot;,
              y: 1270.81,
          },
          {
              x: &quot;09/24/2018&quot;,
              y: 1270.27,
          },
          {
              x: &quot;12/23/2018&quot;,
              y: 1270.54,
          },
          {
              x: &quot;05/25/2019&quot;,
              y: 1271.94,
          },
          {
              x: &quot;06/18/2019&quot;,
              y: 1271.84,
          },
          {
              x: &quot;09/19/2019&quot;,
              y: 1271.31,
          },
          {
              x: &quot;12/18/2019&quot;,
              y: 1271.25,
          },
          {
              x: &quot;03/12/2020&quot;,
              y: 1271.48,
          },
          {
              x: &quot;06/25/2020&quot;,
              y: 1271.72,
          },
      ]}
  /&gt;;
  </code></pre>
  <p>any recommendation would be appreciated. thank you.</p>