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: https://i.sstatic.net/aQImo.png

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: https://i.sstatic.net/ipunu.png

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

translating creates vacant spaces on both sides

I am working with a <div class="scrollable"> that has the CSS property overflow: scroll;. Additionally, I have another <div class="line1"></div> which should not trigger any scrolling on the <div class="scrolla ...

css

Encountering a 404 error when attempting to use the jQuery .load() function with parameters that include periods ('.')

I am attempting to invoke a controller function using the .load() method, but encountering an error which might be caused by the encoding of '.'. The call I am making is as follows: $("#main-content").load( url + "/" + encodeURIComponent(text ...

javascriptphpjqueryajaxcodeigniter

The unexpected token was found in line 1 of the manifest icons code, but not in column 1

This query appears to have been long-standing on Stackflow, but none of the solutions posted seem to resolve it. Even though the JSON validates correctly in validators, I continue to encounter the following error. Any idea what might be causing this issue ...

javascriptjsongoogle-chrome-extension

What is the best way to retrieve the value of a selected radio button with YUI?

Here is the structure of my radio buttons... <div id="test"> <input name="test1" value="a" type="radio"> <input name="test1" value="b" type="radio"> <input name="test1" value="c" type="radio"> </div> What is the best w ...

javascriptformsradio-buttonyui

Making an ajax request using JQTouch

I have implemented a toggle switch in jQTouch. I'm trying to dynamically set the position of the switch based on the result of an AJAX call. I am using jQuery as shown below, but it doesn't seem to be working. var request = $.ajax({ url ...

jqueryajaxjqtouch

Using the ng-repeat directive along with the string replace expression allows for dynamically

Struggling to find a way to remove a substring within an angular expression while using the ng-repeat directive. The controller resides in an external JavaScript file, and here is the corresponding HTML code snippet. function myController($scope, $http ...

javascriptjsonangularjsnode.jsexpress

I am experiencing an issue with environment variables not appearing in my Context component on Next.js. Should I adjust the Next.js configuration or set up the Context to properly utilize the variables?

Why are Environment Variables working on every component inside /pages but not in my Context component in Next.js? Do I need to do some configuration in Next.js for this? (Note: The Shopcontext.tsx file is using a class component that I obtained from a tu ...

javascriptreactjsnext.js

What is the process for including an item in an array within Firestore?

Can someone help me with this code snippet I'm working on: await firebase.firestore().doc(`documents/${documentData.id}`).update({ predictionHistory: firebase.firestore.FieldValue.arrayUnion(...[predictions]) }); The predictions variable is an ar ...

javascripttypescriptfirebasegoogle-cloud-firestore

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

cssbootstrap-4

How can I import tamplateData into my JavaScript files in Docpad?

Looking for a DocPad plugin that can preprocess JS files and utilize templateData variables and helpers to access configuration values. While experimenting with Hogan, I managed to retrieve the variables but encountered difficulty in invoking the helpers. ...

javascripttemplatespreprocessornpmdocpad

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Pass for Achieving the Bokeh2 Effect

I'm attempting to transfer the Bokeh2 Depth of Field effect to an effect composer pass. Every time I try to run it, I encounter the following error: glDrawElements: Source and destination textures of the draw are the same. Below is the render functi ...

javascriptthree.js

Is there a way to locate classes containing underscores within them using Selenium?

Having trouble scraping a webpage with a class name containing an underscore, specifically this element: <span class="s-item__time-left">30m</span> == $0 I attempted to locate it by class name: time = driver.find_elements_class_name("s-item_ ...

pythonhtmlseleniumweb-scrapingelement

Safari seems to have trouble running Javascript, unlike all the other browsers which handle it just fine

I've encountered an issue with a script that duplicates form fields when a "Same as Billing" checkbox is checked in one form and transfers the data to another. Everything works smoothly except in Safari, where it fails to transfer the state selection ...

javascriptjqueryhtml

Limiting text based on the space it occupies

Is it feasible to restrict the number of characters allowed in an input field based on the space they occupy? For instance, W's and M's require enough space for 34 of them. https://i.sstatic.net/xQW5p.png However, regular sentences of the same ...

htmlcssangularmaterial-design

CSS: A guide to creating layouts

I wrote this code snippet to display a table: <div class="topologyBalloon" id="bl_c2f03b99-6d62-43c4-9a35-4b4cbf22a7db"> <a href="#close" class="closeTopologyBalloon">×</a> <div class="contentBody"> <table class="deta ...

htmlcss

Exploring the advanced features of OpenOffice Draw for improved geometry analysis

Struggling with the draw:enhanced-geometry section that involves draw:enhanced-path and draw:equation. I'm working on an OOo converter but can't seem to find any concrete solutions or extensive documentation about this part. Any suggestions on ho ...

javascriptlibreoffice

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

Utilize Ajax datatable to showcase information with the help of CodeIgniter

I am trying to fetch data from a database in my view using ajax, but I am getting the following error message: DataTables warning: table id=users - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please ...

phphtmlajax

Unable to locate CSS file in subfolder

Comparing two scenarios: Scenario 1 is problem-free, but issues persist in scenario 2. Review the details below: Scenario 1: MasterPages: Main\MasterPages.master Css : Main\Theme\CSS\ Javascript : Main\Theme\Javascrip ...

jqueryasp.netcssmaster-pages