OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to format Chart.js dates in the axes and tooltip

  • Thread starter Thread starter Digitalwolf
  • Start date Start date
D

Digitalwolf

Guest
I have the following code that uses chart.js to generate a line graph. The Y axis represents price values, while the X axis represents date values. I want the dates on the X axis to display only the year, but I still want the full date to appear in the tooltip when hovering over a data point.

Code:
  const datesArray = ["1 May 2023", "2 May 2023", "3 May 2023", "4 May 2023", "5 May 2023"];
  const valuesArray = [107.71, 105.98, 106.12, 105.21, 106.215];

  const Chart = ({ width }) =>  (
    <ChartDiv style={{ width }} className='cursor-auto'>
      <PriceGraph 
         chartData={{ data: valuesArray, labels: datesArray }} 
         chartColour={'#218B82'} 
         chartFillColour={'#F2FFFF'} 
      />
    </ChartDiv>
  );

Code:
import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-date-fns';
Chart.register(...registerables);

const PriceGraph = ({ chartData, chartColour, chartFillColour }) => {
  const options = {
    scales: {
      x: {
        ticks: {
          display: true,
          callback: (value, index, values) => {
            const tickDate = new Date(value);
            return tickDate.getFullYear().toString();
          }
        }
      },
      y: {
        beginAtZero: true,
        ticks: {
          display: true,
        }
      }
    }
  }

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        fill: true,
      }
    ]
  }

  return <Line data={chartData.labels ? data : null} options={options}/>;  
}

export default PriceGraph

When I run my code the tool tip reflects the correct date, however each tick on the X Axis displays "1970". I expect this is an issue with the data being input input in my callback function or the inappropriate use of a callback function.

Reviewing the chart.js documentation, there is an indication that I should use the type: time, and apply formatting. When I modify my code as follows I get a blank chart.

Code:
scales: {
      x: {
        type: 'time',
        time: {
          unit: 'year',
          tooltipFormat: 'dd MMM yyyy'
        },
        ticks: {
          display: true,
        }
      },

Any suggestions on how I should go about formatting my X axis?

<p>I have the following code that uses chart.js to generate a line graph.
The Y axis represents price values, while the X axis represents date values.
I want the dates on the X axis to display only the year, but I still want the full date to appear in the tooltip when hovering over a data point.</p>
<pre><code> const datesArray = ["1 May 2023", "2 May 2023", "3 May 2023", "4 May 2023", "5 May 2023"];
const valuesArray = [107.71, 105.98, 106.12, 105.21, 106.215];

const Chart = ({ width }) => (
<ChartDiv style={{ width }} className='cursor-auto'>
<PriceGraph
chartData={{ data: valuesArray, labels: datesArray }}
chartColour={'#218B82'}
chartFillColour={'#F2FFFF'}
/>
</ChartDiv>
);
</code></pre>
<pre><code>import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-date-fns';
Chart.register(...registerables);

const PriceGraph = ({ chartData, chartColour, chartFillColour }) => {
const options = {
scales: {
x: {
ticks: {
display: true,
callback: (value, index, values) => {
const tickDate = new Date(value);
return tickDate.getFullYear().toString();
}
}
},
y: {
beginAtZero: true,
ticks: {
display: true,
}
}
}
}

const data = {
labels: chartData.labels,
datasets: [
{
data: chartData.data,
backgroundColor: chartFillColour,
borderColor: chartColour,
fill: true,
}
]
}

return <Line data={chartData.labels ? data : null} options={options}/>;
}

export default PriceGraph
</code></pre>
<p>When I run my code the tool tip reflects the correct date, however each tick on the X Axis displays "1970". I expect this is an issue with the data being input input in my callback function or the inappropriate use of a callback function.</p>
<p>Reviewing the chart.js documentation, there is an indication that I should use the type: time, and apply formatting. When I modify my code as follows I get a blank chart.</p>
<pre><code>scales: {
x: {
type: 'time',
time: {
unit: 'year',
tooltipFormat: 'dd MMM yyyy'
},
ticks: {
display: true,
}
},
</code></pre>
<p>Any suggestions on how I should go about formatting my X axis?</p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top