Chart.js Radar Chart How to Remove Outer Labels

Question

On mobile, these labels are taking up too much valuable space. How can I remove them while keeping the lines?

I've tried several methods, ones that seem to work for typical x/y graphs, but can't find a way to achieve this for the radar chart.

score 3 · Accepted Answer · answered Mar 08 '17 at 18:57

3

Found a solution! see below:

options: {
    scale: {
        pointLabels: {
            callback: function(pointLabel, index, labels) {
                return screen_w > 500 ? pointLabel : ' ';
            } 
        }
    }
}

I'm using a variable of my own screen_w to conditionally return the label, or nothing.

Works like a charm.

Found buried here: https://github.com/chartjs/Chart.js/pull/1879

answered Mar 08 '17 at 18:57

blindmikey

137
1
10

what suppose is the screen_w or what's the value? – Quethzel Diaz May 31 '20 at 05:45
an integer - I believe in this case via window.innerWidth, but it's been quite awhile. – blindmikey Jun 01 '20 at 06:45

ResolveError · Answer 2 · 2020-04-21T06:09:48.380

3

Found simplest solution for remove outer label for all cases

 scale:{
           pointLabels:{
           fontSize: 0       
             },
       }

Just make FontSize equal to zero

edited Apr 21 '20 at 06:09

answered Apr 20 '20 at 17:11

ResolveError

135
1
20

Chart.js Radar Chart How to Remove Outer Labels

2 Answers2