Chart.js letter spacing very awkward

Question

As shown above, the letter spacing in my Chart.js is very large. I have no clue as to why it is that way - here is my config:

var myLineChart = new Chart(ctx, {
                type: 'line',
                data: lineChartData,
                options: {
                    responsive: true,
                    scales: {
                        yAxes: [
                            {
                                gridLines: {
                                    color: '#354657',
                                },
                                ticks: {
                                    fontFamily: 'Open Sans',
                                },
                            },
                        ],
                        xAxes: [
                            {
                                gridLines: {
                                    color: '#354657',
                                },
                                ticks: {
                                    fontFamily: 'Open Sans',
                                },
                            },
                        ],
                    },
                },
            });

The letter spacing is this large no matter what font I use. Is there a method to reduce it?

Have you tried setting the `fontSize` property in the options like this `xAxes: [{ ticks: { fontSize: 10 } }]` — Kunal Khivensara, Mar 19 '19 at 08:55

score 0 · Answer 1 · answered Sep 08 '20 at 04:46

Not sure if you've resolved this or not yet, but thought I'd give you a heads up. I had a similar question and linked it to this, the answer for me was removing the devicePixelRatio setting that I had set, but given you have the problem in the browser version (I imagine), have you tried setting devicePixelRatio = 2? It might be the fix for this.

Chart.js letter spacing very awkward

1 Answers1

Linked