CODEWITHSUNDEEP
chart.js
Carth
Carth

Reputation: 2343

How to move axis labels to the outer border when using center position

In Chart.js I can create a scatter plot with centered axes by using the position attribute options -> scales -> x -> position as shown here. When doing this though, the axis labels move up into the center of the chart as well. How can I have centered axes and ticks but leave the axis labels themselves at the outer borders of the chart?

enter image description here

const sampleConfig = { type: 'scatter', data: data, options: { responsive: true, plugins: { title: { display: true, text: 'Axis Center Positioning' } }, scales: { x: { min: -100, max: 100, title: { display: true, text: 'X-Label'} }, y: { min: -100, max: 100, title: { display: true, text: 'Y-Label'} } } }, };

Upvotes: 1

Views: 128

Answers (1)

Carth
Carth

Reputation: 2343

I wasn't able to find a solution so I resorted to faking it by doing this:

  • Create another set of x and y axes
  • Hide their ticks marks and disable the grid display
  • Move the titles from the original axes to the new ones
  • Set their position to the left/bottom respectively
x1: {
          title: {
            display: true,
            text: 'X Title',
            padding: 20
          },
          display: true,
          position: 'bottom',
          grid: {
            drawOnChartArea: false, 
          },
          ticks: {
            display: false,
          },
        },
    }

Upvotes: 1

Related Questions