CODEWITHSUNDEEP
javascriptchartschart.js
f1vlad
f1vlad

Reputation: 277

Chart.js radar chart ticks are hidden behind the graph

Is it possible to bring the "ticks" of the Chart.js radar graph to the foreground so that they would be on top of the graph itself?

enter image description here

I don't see anything related to this issue in the official documentation.

Method that renders this:

const chart = new Chart(ctx, {
  type: 'polarArea',
        data: {
    labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
    datasets: [
      {
        label: 'Points',
        pointRotation: 45,
        backgroundColor: [
          color(this.chartColors.grey).rgbString(),
          color(this.chartColors.green).rgbString(),
          color(this.chartColors.blue).rgbString(),
          color(this.chartColors.yellow).rgbString(),
        ],
        data: [0, 0, 0, 0],
        borderWidth: 0,
        pointBackgroundColor: 'rgba(0, 0, 0, 1)'
      }
    ],
  },
  options: {
    responsive: true,
    animation: {
      animateRotate: true
    },
    layout: {
      padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
      }
    },
    scale: {
      ticks: {
        fontColor: '#000000',
        mirror: true,
      }
    },
    legend: {
      position: 'top'
    },
  }
});

One workaround is to make these fill colours transparent like so:

color(this.chartColors.yellow).alpha(0.5).rgbString(),

...this way the ticks would be somewhat acceptably visible. However, I'd rather have them fully saturated. Thanks in advance for any suggestions.

Upvotes: 0

Views: 949

Answers (1)

uminder
uminder

Reputation: 26150

You can define the scale.ticks.z option as as documented here.

scale: {
  ticks: {
    ...
    z: 1
  }
},

z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.

Please have a look at your amended code below:

const chart = new Chart('myChart', {
  type: 'polarArea',
        data: {
    labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
    datasets: [
      {
        label: 'Points',
        pointRotation: 45,
        backgroundColor: ['grey', 'green', 'blue', 'yellow'],
        data: [3, 4, 8, 9],
        borderWidth: 0,
        pointBackgroundColor: 'rgba(0, 0, 0, 1)'
      }
    ]
  },
  options: {
    responsive: true,
    animation: {
      animateRotate: true
    },
    layout: {
      padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
      }
    },
    scale: {
      ticks: {
        fontColor: '#000000',
        mirror: true,
        z: 1
      }
    },
    legend: {
      position: 'top'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Upvotes: 2

Related Questions