Resolving label overlapping issue in Chart.js version 2

I am currently utilizing Chart.js 2 for a project of mine. I've successfully customized the style, but there's one persistent issue that I can't seem to resolve and it's becoming quite frustrating.

Occasionally, the last label on the x-axis gets overlapped.

https://i.sstatic.net/M8xnq.png

Below are the specific options that I have implemented:

$scope.colours = [
    {
        borderColor: '#FFF',
    },
    {
        borderColor: '#FAF6DD'
    },
    {
        borderColor: '#A5CCFE'
    }
];

$scope.options = {

    type: 'line',

    tooltips:
    {
        enabled: false
    },

    elements:
    {
        line:
        {
            borderWidth: 2,
            fill: false
        },
        point:
        {
            radius: 0,
            hoverRadius: 0
        }
    },

    scales: {
        yAxes: [
            {
                gridLines:
                {
                    display: true,
                    color: "#16a693"
                },
                ticks:
                {
                    fontFamily: 'Lato',
                    fontColor: "#fff",
                    fontSize: 14
                }
            }
        ],
        xAxes: [
            {
                type: 'time',
                ticks:
                {
                    autoSkip: true,
                    display: true,
                    autoSkipPadding: 15,
                    fontFamily: 'Lato',
                    fontColor: "#fff",
                    fontSize: 14,
                    maxRotation: 0
                },

                time:
                {
                    displayFormats:
                    {
                        'millisecond': 'HH:mm:ss',
                        'second': 'HH:mm:ss',
                        'minute': 'HH:mm:ss',
                        'hour': 'HH:mm:ss',
                        'day': 'HH:mm:ss',
                        'week': 'HH:mm:ss',
                        'month': 'HH:mm:ss',
                        'quarter': 'HH:mm:ss',
                        'year': 'HH:mm:ss'
                    }
                },
                gridLines:
                {
                    display: false
                }
            }
        ]
    }
};

I would greatly appreciate any assistance with this matter.

Answer №1

To avoid overlapping, I resolved this issue by slightly tilting the text on an angle.

All you need to do is include minRotation: 30 in the ticks: {} object.

  ticks: {
           fontFamily: 'Lato',
           fontColor: "#fff",
           fontSize: 14,
           minRotation: 30
         }

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

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

Guide on integrating buefy (a vue.js component library) into your Laravel blade template

I'm currently integrating buefy into my project, but I'm encountering issues with using vue.js on Laravel 5.8. Can anyone offer assistance? Here is the code snippet from my app.js: require('./bootstrap'); window.Vue = require('v ...

Passing a table value to a PHP script using JQuery on click event

I am struggling with implementing functionality to filter a dataset based on the link that the user clicks on within a bootstrap modal. The modal contains a morris.js graph and I need to pass the clicked value (e.g. Cluster1 or Cluster2) to a data pull scr ...

Transform Vue military time to regular time format

I am retrieving the arrivalTime from todos.items. As I fetch the arrivalTime, it is sorted using the sortedArray function(), which converts the times to military time. Is there a way to change the sorted military time values to standard time format after s ...

Tips for effectively adjusting lighting in a customized shader material

Presenting a demonstration showcasing the use of a height map in three.js coupled with custom shader(s). Everything appears to be functioning smoothly now. The working demo can be found on this link. Below are the shader scripts: <script id="vertexShad ...

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard. However, my client now has a specific request - t ...

"Encountering a glitch involving Vue.js 3, Pinia, and a centralized store

While using Pinia in a Vue.js 3 project, I encountered an issue. The problem arises when I attempt to load constant JSON structures from my backend using the file src/store/constants.store.ts // @ts-check import { defineStore } from "pinia" impor ...

Is it possible to retrieve resolved parameters from a template-rendering function?

I'm facing a scenario where I have a state setup like this .state('dropdown', { url: '/dropdown', views: { "@":{ template: ...

The Ajax POST call was unsuccessful

I seem to be encountering an issue, even though everything appears to be correct. I am currently developing on localhost and I am facing difficulties loading a file. This is the code I am using. I am working in NetBeans and the console shows no errors. & ...

Unable to reach the form within the confines of the AngularJS controller

I am attempting to manually reset a form from within an AngularJS controller, but I am unable to access it using either $scope or controllerAs. When I try to log $scope.SupportForm, it returns as undefined. HTML <form name="supportForm" id=&q ...

Transferring information between directive and controller

I am currently utilizing ui-grid to facilitate the upload of an XLS file via a directive and populate the data My goal is to transfer data between my directive and controller, as I am new to Angular. I have explored several discussions (this, this, this, ...

Leveraging APN and GCM Push Notifications to trigger a website redirect within a Cordova application

Seeking guidance on using Cordova PushPlugin and AngularJS to receive a push notification containing a URL in the payload, then automatically navigate to that page when the notification is opened. How can this be achieved? I attempted to implement this f ...

Tips for resolving the 'node-gyp rebuild' problem on Windows 10

While attempting to incorporate a node NPM dependency into my project, I encountered an issue with node-gyp rebuild, which I have already reported. I am aware of a potential solution from this Stack Overflow post, but unfortunately it is not effective for ...

There is a possibility of encountering an endless update loop in the watcher when utilizing the expression "tabs" error in vue

My code includes a watcher on tabs to prevent them from changing based on the values of the edit. If edit is false, then go to the next tab; otherwise, prevent the change. However, when I try to click on the tab heading to change the tab, I encounter an er ...

Converting a JavaScript variable into an xls or csv file

My application currently uses Javascript for calculations and data plotting, but I want to give users the ability to download the data as a csv or xls file. Is there a way in Javascript or another method where users can click a button, enter a filename, an ...

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

Differences between THIS and angular's $SCOPE.$ONIn JavaScript,

After working with Angular 1.x for a couple of years, I decided to experiment with new approaches to enhance my understanding of Angular and JavaScript. Previously, I believed that the "vm" declaration in the JavaScript controller was directly linked to th ...

Error: Attempted to call $scope.map.control.getGMap function when clicking on the Map, but it is not defined

I'm currently working with Angular-Google-MAP and I'm trying to add a marker to the map. However, whenever I click on the map, I receive an error message saying $scope.map.control.getGMap is not a function. This error is occurring within the geoc ...

Challenge involving CSS and Javascript for solving puzzles

In my attempt to create a puzzle with 2 rows and 3 columns using CSS and JavaScript, I envision the pieces of the puzzle being black and cut into various shapes. The objective is for users to drag these pieces onto the board in order to complete it. I have ...