title: Format labels in Chart.js. Data form axios
body: <p>I am using chart.js in reaction to create line chart. I want to show the day and month data like Aug 25, Jul 16. I don't know how to change the format of this data downloaded from the API. Please help. Here is my code
  thank you for the hints</p>
  <p>Is there a proper way to format dates for data labels in Chart.JS?</p>
  <pre><code>import axios from 'axios';
  import { useParams } from 'react-router-dom';
  import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
  } from 'chart.js';
  
  import { Line } from 'react-chartjs-2';
  
  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
  );
  
  const rate = axios.create({
    baseURL: 'http://api.nbp.pl/api/exchangerates/rates/a/',
  });
  
  const Chart = () =&gt; {
    const [post, setPost] = useState();
    const { id } = useParams();
  
    useEffect(() =&gt; {
      async function getPost() {
        const response = await rate.get(`/${id}/last/10/?format=json`);
        setPost(response.data);
      }
      getPost();
    }, [id]);
  
    const data = {
      type: 'line',
      labels: post?.rates?.map((x) =&gt; x.effectiveDate),
      datasets: [
        {
          label: `Ostatnie 10 odczytów`,
          data: post?.rates?.map((y) =&gt; y.mid),
          lineTension: 0.1,
          backgroundColor: 'rgba(15, 174, 150)',
          borderColor: 'rgba(15, 174, 150)',
          gridLines: 'false',
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: 'rgba(15, 174, 150)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(15, 174, 150)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
        },
      ],
      options: {
        responsive: true,
      },
    };
  
    return (
      &lt;div
        style={{
          width: '800px',
          height: '800px',
          margin: '0px auto',
          paddingTop: '500px',
        }}
      &gt;
        &lt;Line data={data} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Chart;
  </code></pre>