Enhancing the Appearance of Legends in Chartjs

I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the bar chart. Additionally, I'd like them to be arranged horizontally instead of vertically as shown in the image below:

index.html

<div id="title"></div>
<div id="content">
</div>
<div>
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>

CSS

.chart-legend li span{
    color: red !important;
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    list-style-type: none !important;

}

This is how it looks currently:

javascriptjqueryhtmlcsschart.js

Answer №1

To customize the appearance of your list items, you can style the ul to remove the bullet points and set the color, while also making the li elements inline. Here is an example CSS code that achieves this:

.chart-legend ul {
    list-style: none;
    background: black;
    color: white;
}

.chart-legend li {
    display: inline-block;
}

Please note that if you have other CSS rules targeting the same elements, you may need to provide more specific styling or use style resets to avoid conflicts.

Check out this live demo on Fiddle - http://jsfiddle.net/bseccq9v/

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

Adjust the color of an SVG icon depending on its 'liked' status

In my React/TypeScript app, I have implemented an Upvote component that allows users to upvote a post or remove their upvote. The icon used for the upvote is sourced from the Grommet-Icons section of the react-icons package. When a user clicks on the icon ...

javascriptreactjstypescriptsvgreact-icons

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

During the process of converting my existing app to dark mode, I came across an instance where I needed to initialize a UITextView with an NSAttributedString for displaying some legal text from the app store. While everything looked good in light mode, swi ...

htmliosswiftnsattributedstring

Content width exceeds body width

Having an issue with body width that seems strange. Check out this fiddle link to see for yourself. <div class="topbar" style="width:100%; background:#000; color:#fff"> <div class="container" style="width:970px; margin:0 auto;">Lorem ipsum ...

css

Error: FullCalendar does not display a header for the timeGridWeek view when the dates fall

Currently, I am integrating fullcalendar 5.5.0 with Angular 10. After migrating from fullcalendar v4 to v5, I noticed an annoying issue where the header for the date before the validRange start is no longer displayed: These are the parameters being used: ...

javascriptangularfullcalendarfullcalendar-5

Error encountered: Provider '$rootScopeProvider' is not recognized - check for typos in the syntax

I am encountering an issue with the templateUrl in AngularJS. When I input this code into my editor and execute it, everything works flawlessly: HTML: <!DOCTYPE html> <html lang= "en"> <head> <meta charset="UTF-8" /> < ...

javascriptangularjs

Is it possible to combine form elements into a unified object structure?

Currently, I am working on a project where I need to aggregate form elements into an object and then send it via Ajax. Here is the code snippet that I have started using, but I am stuck on how to proceed further. $('.jcart').live('submit&ap ...

ajaxjquery-pluginsjquery

Ensuring a radio button is pre-selected by default in React by passing in a prop

Assume I have a React function similar to this function Stars({handleStarClick, starClicked}) { if (starClicked === 3) { document.getElementById('star3').checked = true } return ( <div className="rate"> ...

javascriptreactjscomponentsradio-button

Tips for aligning two TD elements with varying lengths in the same row:- Consider setting a specific width for each

Can anyone assist me in properly aligning this structure? I am looking to reduce the height of the "Todays Special" td significantly. The size of this td expands based on the content, for example, if new fruits are added. Any help in resolving this would ...

htmlcss

Images overlapping within a dynamic container

I am currently working with a responsive container that contains one image. The container and image resize well when the window size changes. However, I now need multiple images to overlap each other (all of the same size). How can I achieve this using HTM ...

htmlcss

What is preventing my Button's onClick() method from being effective?

Below is a snippet of my HTML layout using the sciter framework: <div id="volume_micphone_slider" style="z-index:1;"> <input id="volume_slider" class="volume_slider" type="vslider" name="p1c" max="100" value="20" buddy="p1c-buddy" /> < ...

javascripthtml

Having trouble with obtaining real-time text translation using ngx translate/core in Angular 2 with Typescript

Issue : I am facing a challenge with fetching dynamic text from a JSON file and translating it using the translate.get() method in Angular2. this.translate.get('keyInJson').subscribe(res => { this.valueFromJson = res; /* cre ...

javascriptangulartypescriptionic2

What is the best way to interact with the dynamic Twitter follow button using Selenium and Python?

Trying to interact with Twitter's follow button can be challenging, especially when it is dynamic and has attributes that are not well-documented in the Selenium documentation. Below is a snippet of the HTML code for the button: Below you will see my ...

pythonhtmlselenium

Content dynamically created using Ajax and event listeners bound with jQuery

I am facing an issue with a page that showcases products using an ajax request for loading. The pagination buttons are also part of the display along with the products. Below is my $('document').ready(function(){ $.ajax({ url ...

jqueryajax

Express is throwing an error indicating that the specified route cannot be found. Is there a way to dynamically

After dynamically adding routes and sending a post request through Postman, I encountered a "not found" error message. In the app, a 404 is logged next to the endpoint, indicating that Express cannot locate it. However, I know that I added the router dynam ...

javascriptnode.jsexpress

Resizing an image based on the coordinates of a click position by utilizing jQuery

I'm new to experimenting with code, and I've been playing around with trying to shrink an image to nothing at a central point. I've found some success using a mix of the code snippet below and relative positioning in my CSS. $(function() ...

javascriptjquerycsscoordinatescss-position

Any alteration made to the salary, bonus, or deduction in the table cells will automatically impact the total amount displayed

Greetings, I currently have a table with 5 columns Name Salary Bonus Deduction Total Ahmed 500 500 100 900 The calculation for the total is as follows: Total=Salary+Bonus-Deduction and the total should be displayed in red according to my c ...

jquery

I am a beginner in the world of Typescript/Angular, and I have encountered a compiling error TS2339. It seems that even when the condition *ngIf="x.length > 0;" should be false, the

I'm currently enrolled in a Typescript/Angular course where I am learning about the implementation of "*ngIf". During one of the lessons, the instructor provided an example using an empty array to demonstrate how it fails the condition and results in ...

htmlangularangularjstypescript

Exploring the Fusion of Strings and Arrays of Javascript Objects using jQuery and JSON

Trying to achieve a simple task, but not very proficient in jQuery so struggling to figure it out. Want to send JSON data to an ASP.NET Controller. Data includes strings and a list of objects. The code snippet would appear like this: View: $(document). ...

javascriptjqueryasp.netjsoncontroller

Despite locating the button, Protractor still encounters difficulties when attempting to click on it

I've been having trouble clicking on a button using Protractor. The issue is that even though the driver can locate the element, it still won't click on it. Any assistance would be greatly appreciated. Thank you in advance. Here is the HTML for ...

javascripthtmlxpathselenium-webdriverprotractor

Unable to dynamically validate the input field for the name using Angular.js

Can someone assist me with an issue I'm having? I'm encountering an error while trying to dynamically validate input fields using Angular.js. Error: TypeError: Cannot read property '$invalid' of undefined Let me explain the code t ...

javascriptangularjsvalidation