Difficulty with displaying multi-line titles in chart.js

My chat.js title is configured as:

 new Chart(document.getElementById(z).getContext('2d'), {

            type: 'doughnut',
            data: {
                datasets: [{
                    backgroundColor: $scope.bgColor,
                    data:  [
                      some stuff
                    ]
                }],
                 labels: [some stuff],

            },
            options: {
                title: {
                    display: true,
                    text: ['Title Line One', 'Title Line Two']
                },

                cutoutPercentage: 80,
                hover: {mode: null},
                elements: {
                    center: {
                        text:  [
                           some stuff ],
                        color: '#FF6384', // Default is #000000
                        fontStyle: 'Arial', // Default is Arial

                    }
                },
                legend: {
                    display: false
                },

            }
        });

However, the title is not appearing in two lines as expected. The documentation here suggests that providing an array input should result in a multiline title, but this is not working correctly.

javascriptangularjschart.js

Answer №1

Your example is good to go. Just ensure that all code is properly formatted.

Here's a functioning sample: https://codepen.io/ItsT-Mo/pen/rPNrGm (The title is specified in Line 12)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [{
            label: 'Testdata',
            data: [1, 2, 3]
        }]
    },
    options: {
        title: {
            display: true,
            text: ['Title Line One', 'Title Line Two']
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

If it still doesn't function as expected, check the page structure to ensure both lines are present in the DOM. If they are but only one appears, then some CSS might be covering one line of the title.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The server mistakenly opened the index in the opposite direction

I am currently working on a React application that I launch from an Express server. Within my project, I have a public directory containing an index.html file, as well as a duplicate of that file in the root directory. Here is my code snippet: const exp ...

javascriptnode.jsexpress

React transmits an incorrect argument through the function

Having a bit of trouble passing a parameter alongside the function in my for loop to create SVG paths. The props are working fine with the correct 'i' value except for selectRegion(i) which ends up getting the final value of 'i' after t ...

javascriptreactjs

Using React with Axios to trigger several requests with a single action

Let's say a user selects a team from a dropdown menu, triggering a request to an API endpoint. const selectHomeTeamStat = evt => { const { value } = evt.target; getStats(leagueId, value, 'home'); }; In this hypothetical scen ...

javascriptreactjspromisegetaxios

The fullcalendar does not update the view properly

For days now, I've been struggling with a nightmare trying to make the changeView event function as it should. My goal is to programmatically change the view of the calendar. How? By searching for fullcalendar using its id in the controller and setti ...

angularjsfullcalendar

Error message: Element is not able to receive focus due to an

Here is the code snippet for the input field: <span ng-if="cell.state != 'edit_mode'" class="ng-scope"> <span ng-class="{'with-right-padding' : cell.input_type === 'auto_complete'}" class="value-cell ng-binding"& ...

javascriptangularjsseleniumprotractor

Tips for sending a PHP JSON array to a JavaScript function using the onclick event

I am trying to pass a PHP JSON array into a JavaScript function when an onclick event occurs. Here is the structure of the PHP array before being encoded as JSON: Array ( [group_id] => 307378872724184 [cir_id] => 221 ) After encoding the a ...

javascriptphpjson

Preventing Duplicate Entries in Angular Data Posting

I am currently trying to submit a form to a PHP page that will then return a table of data. The process works perfectly fine if I do not include any parameters in the post request. However, as soon as I try to add parameters for the query, I encounter an n ...

javascriptphpangularjs

Learn the process of uploading and converting multiple files into base64 using AngularJS

Initially, I was able to successfully upload a single file and convert it to base 64. However, when attempting to upload multiple files and convert each one to base 64 using the directive below, all images end up being converted into a single base 64 strin ...

angularjsfile-upload

Using express to activate http compression

Currently experimenting with the Darksky API and came across a query parameter that caught my attention: The extend=hourly option is available. With this option, hour-by-hour data for the next 168 hours will be returned rather than just the next 48. It i ...

javascriptnode.jsexpress

Ways to invoke a C# server-side function using JavaScript

I'm looking to invoke a C# server method from JavaScript. Within my gridview, there is a column containing dropdown lists. When the value of the dropdown list changes, I need to use JavaScript to call a server-side method and update the value of anoth ...

asp.netjavascript

JavaScript's Scoped Exports concept

After exporting something in JavaScript, let's consider a scenario where we have a file named 'foo.js' with the line: export default foo; This allows us to import it globally from any other file. But what if there is a need to restrict thi ...

javascriptecmascript-6ecmascript-next

What takes precedence in npm scripts - local dependencies or global ones?

When using npm scripts, the ./node_modules/.bin path is automatically added to your PATH. This means that by simply running npm test with the provided package.json, npm will utilize the local version of mocha located in ./node_modules/.bin. "scripts": { ...

javascriptjsonnode.jsnpmnpm-scripts

"Difficulty encountered in getting scroll-x: auto to function properly in iOS and Safari when embedding an image with a click map inside a container

We're encountering an issue with a wide image (a colour palette) that is too large for mobile screens, so we decided to place the image in a container with a horizontal scroll bar. This solution works perfectly on most browsers, but not on iOS and Saf ...

javascripthtmlcssimageimagemap

My attempt at utilizing the regex function was unsuccessful

When attempting to use a regex function for matching tags in the title and caption, it appears to work fine. However, adding more matching tags causes the function to fail. Below is the code snippet that functions correctly without any issues: $(".si ...

javascriptjqueryregexmatch

The SOAP request did not return an array with strings as expected, but rather an empty array, when

Encountered a situation where sending a SOAP request with an array of strings through Ajax results in the request being successfully passed to the web service. However, upon deserialization, the array is rendered empty. The ASP.Net WebService features the ...

javascriptc#ajaxweb-servicessoap

Error: The import statement is invalid when used outside of a module

Click here to watch the video <!DOCTYPE html> <html> <head> <title>Three.js</title> <style type="text/css> html, body {margin: 0; padding: 0; overflow: hidden} </style> </head> <body> <div id="w ...

javascriptthree.js

Tips for ensuring proper function of bullets in glidejs

I am currently working on implementing glidejs as a slider for a website, but I am facing issues with the bullet navigation. The example on glidejs' website shows the bullets at the bottom of the slider (you can view it here: ). On my site, the bullet ...

javascripthtmlglidejs

My Discord bot automatically sends an embedded message whenever someone replies to a message

Is there a way to make the bot only send the embed message when mentioned with @, but it keeps sending again when replied? const mentionEmbed = new Discord.MessageEmbed() .setColor("#FF5733") .setTitle("Greeting, Roberval here ...

javascriptnode.jsdiscorddiscord.js

Issue with hidden event callback not functioning properly in Bootstrap 3 popover

After studying this example, I attempted to incorporate a hidden callback function. While the show callback is functioning perfectly, the hidden callback seems to be ineffective. Can someone shed light on why this issue is occurring? To showcase the probl ...

javascripttwitter-bootstrap-3callbackbootstrap-popover

Navigating nested objects in JSON from an API: A guide to accessing hidden data

I am currently utilizing the cryptocomare API to retrieve data on various crypto coins within a Nextjs App. My approach involves redirecting users to the coin details page when they click on a specific symbol. I then attempt to extract this clicked symbol ...

javascriptjsonnext.jsnested-json