CODEWITHSUNDEEP
javascriptreactjschart.jsdata-visualizationreact-chartjs-2
Cole Ogrodnick
Cole Ogrodnick

Reputation: 134

Manipulate x axis label positioning. React Chartjs 2

I am trying to make a an area chart that has x axis labels displayed above the actual axis itself. Here's an example:

enter image description here

I have the axis labels, but I cannot find a way to move them just above the X axis

Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Filler)

const options = {
  layout: { padding: { top: 50 } },
  responsive: true,
  elements: {
    line: {
      tension: 0.4, // makes the line smoother
    },
    point: {
      radius: 0,
    },
  },
  scales: {
    x: {

      grid: {
        display: false, // hides lines in background
        drawBorder: false,
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        display: false, // hides lines in background
        drawBorder: false,
      },
      ticks: {
        display: false,
      },
    },
  },
}

const chartData = {
  labels: ['JAN', 'FEB', 'MAR', ...],
  datasets: [
    {
      data: [12, 79, 56, ...],
      borderWidth: 5,
    },
  ],
}

export const Graph = () => {
  return (
    <div>
      ....
      <Line plugins={plugins} options={options} data={chartData} />
    </div>
  )
}

I need it to be responsive, being able to change the time window that is graphed. I tried to do an afterDraw() function however that isn't ideal given the need to responsive.

Upvotes: 1

Views: 1599

Answers (1)

Cole Ogrodnick
Cole Ogrodnick

Reputation: 134

After some digging, I was able to find this solution:

const options: {
...
scales:{ x: position: { y: 20 } }. <------------------ Answer here
}

Upvotes: 2

Related Questions