I've created a Chart JS chart and generated the legend separately so that I can move it over to the right of the chat - that bit is fine and works but the legend itself has styled it's self as a standard bullet list with bullet points in place of the colour key. The labels have generated with no issues it's just the actual coloured boxes that I'm missing.

CSS:

.legend {
   width: 50%;
   position: absolute;
   top: 100px;
   right: 20px;
   color: @light;
   font-family: @family;
   font-variant: small-caps;
   font-size: @size + 2;
}

JS:

 // Dummy Data
    var data = {
        labels: [
            "Fuel Consumption (Miles)",
            "Distance Travelled (Miles)",
            "Distance Remaining (Miles)",
            "Fuel Cost (Pounds)",
            "Time Driving (Minutes)"
        ],
        datasets: [
            {
                data: [300, 50, 100, 25, 120],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ]
            }]
    };

    var options = 

{
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%= value %>%",
    responsive: false,
    legend: {
        display:false
    }
}

// Today's Chart
var today = document.getElementById("today").getContext("2d");
var myDoughnutChart = new Chart(today, {
    type: 'doughnut',
    data: data,
    options: options
});

document.getElementById('legend').innerHTML = myDoughnutChart.generateLegend();

HTML:

<canvas id="today" style="width: 40%;"></canvas>
<div id="legend" class="legend"></div>

Here's a JSFiddle of the issue: /

I've created a Chart JS chart and generated the legend separately so that I can move it over to the right of the chat - that bit is fine and works but the legend itself has styled it's self as a standard bullet list with bullet points in place of the colour key. The labels have generated with no issues it's just the actual coloured boxes that I'm missing.

CSS:

.legend {
   width: 50%;
   position: absolute;
   top: 100px;
   right: 20px;
   color: @light;
   font-family: @family;
   font-variant: small-caps;
   font-size: @size + 2;
}

JS:

 // Dummy Data
    var data = {
        labels: [
            "Fuel Consumption (Miles)",
            "Distance Travelled (Miles)",
            "Distance Remaining (Miles)",
            "Fuel Cost (Pounds)",
            "Time Driving (Minutes)"
        ],
        datasets: [
            {
                data: [300, 50, 100, 25, 120],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ]
            }]
    };

    var options = 

{
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%= value %>%",
    responsive: false,
    legend: {
        display:false
    }
}

// Today's Chart
var today = document.getElementById("today").getContext("2d");
var myDoughnutChart = new Chart(today, {
    type: 'doughnut',
    data: data,
    options: options
});

document.getElementById('legend').innerHTML = myDoughnutChart.generateLegend();

HTML:

<canvas id="today" style="width: 40%;"></canvas>
<div id="legend" class="legend"></div>

Here's a JSFiddle of the issue: https://jsfiddle/WebDevelopWolf/kbqa8fcz/

• javascript
• jquery
• html
• css
• chart.js

Share Follow edited May 12, 2017 at 9:39 Web Develop Wolf asked May 12, 2017 at 9:23 Web Develop WolfWeb Develop Wolf 6,3661313 gold badges6161 silver badges116116 bronze badges 4

• Can you make an working example? – Sahil Dhir Commented May 12, 2017 at 9:34
• Please create a snippet and as exactly what do you want to be done from your snippet. – Sidney Sousa Commented May 12, 2017 at 9:35
• please provide working fiddle or runnable code so that i can fix the issue.. – Ritwika Das Commented May 12, 2017 at 9:35
• Updated with a fiddle – Web Develop Wolf Commented May 12, 2017 at 9:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is the fixture. The legends are actually creating the colors but as its a custom legend you have to write a little css for workaround.

.legend ul li{list-style:none;}
.legend ul li span{ width:50px; height:15px;display:inline-block; margin-right:5px; }

Below is the working code:

// Dummy Data
    var data = {
        labels: [
            "Fuel Consumption (Miles)",
            "Distance Travelled (Miles)",
            "Distance Remaining (Miles)",
            "Fuel Cost (Pounds)",
            "Time Driving (Minutes)"
        ],
        datasets: [
            {
                data: [300, 50, 100, 25, 120],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ]
            }]
    };

    var options = 

{
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%= value %>%",
    responsive: false,
    legend: {
        display:false
    }
}

// Today's Chart
var today = document.getElementById("today").getContext("2d");
var myDoughnutChart = new Chart(today, {
    type: 'doughnut',
    data: data,
    options: options
});

document.getElementById('legend').innerHTML = myDoughnutChart.generateLegend();

.legend {
   width: 50%;
   position: absolute;
   top: 100px;
   right: 20px;
   color: @light;
   font-family: @family;
   font-variant: small-caps;
   font-size: @size + 2;
}
.legend ul li{list-style:none;}
.legend ul li span{ width:50px; height:15px;display:inline-block; margin-right:5px; }

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="today" style="width: 40%;"></canvas>
<div id="legend" class="legend"></div>