[Chartjs]-Is there a way to change part of the title to another font style or set a custom title format in Chart.js?

by

1👍

As of Chart.js v3, you can now add different styles for the title and subtitle of the chart. So while you wouldn’t be able to italicize just one word, you could italicize just the subtitle:

plugins: {
  title: {
    display: true,
    text: 'Example Title'
  },
  subtitle: {
    display: true,
    text: 'Example Italic Subtitle',
    font: {
      style: 'italic'
    }
  }
},

The full options for title and subtitle can be found in the docs: https://www.chartjs.org/docs/latest/configuration/title.html.

0👍

To manage the style of the title you need to use fontStyle, in this case inside your options.title:

 options: {
     title: {
       display: true,
        text: 'Example <i>title<i> for *italic* word',
        fontSize: 18, //Tamaño de letra del titulo
        fontStyle:"italic"
     },
  }

Snippet:

<!DOCTYPE html>
<html style="background-color: black;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
        <link
            href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap"
            rel="stylesheet"
        />
    </head>
    <body class="">
        <canvas
            id="myChart"
            width="1904"
            height="400"
            class="chartjs-render-monitor"
            style="display: block; width: 1904px; height: 400px;"
        >
        </canvas>
        <script>
            var ctx = document.getElementById('myChart');

            Chart.defaults.global.defaultFontFamily =
                'Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif'; //Tipo de letra
            Chart.defaults.global.defaultFontSize = 14; //Tamaño de letra global
            Chart.defaults.global.defaultFontColor = '#fff'; //Color de letra

            var labels_1 = ['Test', 'Test', 'Test', 'Test'];

            var data_1 = [10, 12, 25, 35];

            var colors = [
                'rgba(44,127,184, 1)'
            ];

            var myChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: labels_1,
                    datasets: [
                        {
                            label: '',
                            data: data_1,
                            backgroundColor: colors[0],
                            borderColor: colors[0],
                            borderWidth: 1,
                            fill: false,
                        },
                    ],
                },
                options: {
                    title: {
                        display: true,
                        text:
                            'title in italic',
                        fontSize: 18, //Tamaño de letra del titulo,
                        fontStyle:"italic"
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                            left: 10,
                            right: 10,
                        },
                    },
                    tooltips: {
                        callbacks: {
                            title: function (tooltipItem, data) {
                                var title =
                                    data['labels'][tooltipItem[0]['index']];
                                title = title.toString();
                                title = title.split(',');
                                title = title.join('\n');
                                return title;
                            },
                            label: function (tooltipItem, data) {
                                var value =
                                    data.datasets[0].data[tooltipItem.index];
                                value = value.toString();
                                value = value.split(/(?=(?:...)*$)/);
                                value = value.join(',');
                                return value;
                            },
                        },
                    },
                    scales: {
                        yAxes: [
                            {
                                display: true,
                                ticks: {
                                    beginAtZero: true,
                                },
                                scaleLabel: {
                                    display: false,
                                    labelString: 'No. de focos',
                                },
                            },
                        ],
                        xAxes: [
                            {
                                display: false,
                                ticks: {
                                    beginAtZero: true,
                                },
                                scaleLabel: {
                                    display: false,
                                    labelString: 'País',
                                },
                            },
                        ],
                    },
                    legend: {
                        display: false,
                    },
                },
            });
        </script>
    </body>
</html>

Leave a comment