1

I am trying to to style style my Chartjs legend but for some reason it is not allowing me to override the font color. I want to change the font color to white while retaining the colors for each item in the bar chart, and then I want them to be displayed horizontally instead like this: enter image description here

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 currently looks: enter image description here

user2402107
  • 913
  • 5
  • 22
  • 43
  • The code you are showing doesn't actually appear to be trying to change the font color. Have you tried just adding a CSS style `color: #FFFFFF;` (or the equivalent `color: white;`) for your font? – user1205577 Oct 12 '15 at 14:07
  • .chart-legend li span{ color: red !important; display: block; width: 12px; height: 12px; margin-right: 5px; list-style-type: none !important; } – user2402107 Oct 12 '15 at 14:54
  • Yes, I added that sorry I removed it before showing, and it does not work. – user2402107 Oct 12 '15 at 14:54

1 Answers1

3

You need to style your ul to remove the bullet points (and set the color) and you need to make your li inline. This should do this for you

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

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

Note that if you have additional CSS that targets the same elements you might need more specificity or style resets.

Fiddle - http://jsfiddle.net/bseccq9v/

potatopeelings
  • 40,709
  • 7
  • 95
  • 119