Chart Js - Bar Chart- How to make the first line of Label BOLD?

Question

var horizontalBarChart = new Chart(horizontalBarChartCanvas, {
            type: 'horizontalBar',
            data: {
                labels: [["Company Brand A", "Brand A"], "Company Brand B", "Company Brand C", "Company Brand D", "Company Brand E", "Company Brand F", "Company Brand G"],
                datasets: [{
                    data: [5000, 12000, 3000, 8000, 10000, 4000, 14000],
                    backgroundColor: ["#01d283", "#01d283", "#01d283", "#01d283", "#01d283", "#01d283", "#01d283"],
                }]
            },
            options: {
                tooltips: {
                    enabled: true
                },
                responsive: true,
                legend: {
                    display: false,
                    position: 'bottom',
                    fullWidth: true,
                },
                scales: {
                    pointLabels: {
                        fontStyle: "bold",
                    },
                    yAxes: [{
                        barPercentage: 0.50,
                        gridLines: {
                            display: false,
                        },
                        ticks: {
                            fontColor: '#004c7f',
                            fontFamily: 'Open Sans',
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false,
                            tickMarkLength: 5,
                        },
                        ticks: {
                            fontColor: '#004c7f',
                            fontFamily: 'Open Sans',
                            weight: "bold"
                        },
                        scaleLabel: {
                            display: false,
                            fontFamily: 'Open Sans',
                            fontColor: '#004c7f',
                            labelString: 'Scale Label'
                        },
                    }],
                },
            }
        });

I am using chart.js, and unable to make the first line of label BOLD!

Can anyone suggest how?

Please review my code and attachment.

P.S the first line bold shown in the attached made in photoshop.

I've already tried this, but the below code is not working

scales: {
     pointLabels: {
          fontStyle: "bold",
     },
}

Chart JS Label - How to BOLD?

Can you a fiddle of what you have tried, that will be helpful — Akhil Aravind, May 21 '21 at 11:40
without your functional sample, it will be difficult ot help you — Frenchy, May 21 '21 at 11:56
Duplicate? [https://stackoverflow.com/questions/46221425/chart-js-make-part-of-labels-bold](https://stackoverflow.com/questions/46221425/chart-js-make-part-of-labels-bold) — Rob Moll, May 21 '21 at 12:21
@RobMoll The question / answer you have suggested seems to be duplicate, but both the codes are different. And we have already tried your referred link, and it didnt work. Please Suggest! — Hasan Rasheed, May 22 '21 at 07:58

Chart Js - Bar Chart- How to make the first line of Label BOLD?

0 Answers0