CODEWITHSUNDEEP
javascriptchart.js
Steve W
Steve W

Reputation: 476

ChartJS Only Show Large Font Size for a Specific Tick

I am attempting to emphasize a specific value on the X-Axis if it meets a specific condition.

For example, in my codepen I want to only change the font size of the 'blue' bar. Is this even possible with Chart.js?

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                ticks: {
                    //only show large font size for 'Blue'
                    fontSize: 16
                }
            }]
        }
    }
});

Upvotes: 0

Views: 2231

Answers (3)

Randy Welt
Randy Welt

Reputation: 158

For chartjs 3.0 and higher, it can be done by using scriptable-options. Include it like this into your options for ticks:

options: {
    scales: {
             x: {
                  ticks: {

font: {
       size: (c) => {
         if (c.index==1){
             return 20 // at tick label with idx one set fontsize 20
          }
          else {
            return 12 // for all other tick labels set fontsize 12
          }
}, 
},
},
},
},
},

Upvotes: 1

Devansh J
Devansh J

Reputation: 4194

Chartjs doesn't have a public api to do this but you can modify internal _ticks on beforeDraw and make the label "Blue" as major: true then that label will be drawn using the major styling in tick configuration options.

Also use this with caution since it relies on internal implementation and thus might break in future releases (very unlikely to happen but just saying).

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                ticks: {
                    fontSize: 16,
                    major: {
                      fontSize: 20
                    }
                }
            }]
        }
    }, 
    plugins: [{
        beforeDraw: function({ chart }, options) {
            chart.boxes
            .find(box => box.id === "x-axis-0")
            ._ticks
            .find(tick => tick.label === "Blue")
            .major = true;
        }
    }]
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

PS: Just in case someone is wondering how I know this internal implementation I searched fillText in chartjs github source code and console.log(myChart) xD

Upvotes: 1

flppv
flppv

Reputation: 4289

Looks like it's not possible according to their docs. You can only do something like uppercase needed label with callback function

xAxes: [{
  ticks: {
    fontSize: 16,
    callback: v => v === 'Blue' ? v.toUpperCase() : v
  }
}]

Upvotes: 1

Related Questions