I am trying to add colored box as legends to the morris graph. The below picture shows the C3 graph legend. But I am unable to find a way to add in the Morris the same way.

Can anyone help ?

Currently , The Morris legends appears as below with the code:

The code for Morris - jQuery

var chart=  Morris.Line({
    element: 'status-req',
    data: <?=json_encode($jsonDataArray)?>,     
    xkey: 'y',
    ykeys: <?=json_encode($deliveryAspect['statusKeys'])?>,
    labels:  <?=json_encode($deliveryAspect['statusLabels'])?>,
    hideHover: 'auto',
    resize: true,      
    smooth:true       
});

chart.options.labels.forEach(function(label, i) {
    var legendItem = $('<span align="center"></span> ').text(label).css('color', chart.options.lineColors[i])
    $('#legend').append(legendItem);
});

I am trying to add colored box as legends to the morris graph. The below picture shows the C3 graph legend. But I am unable to find a way to add in the Morris the same way.

Can anyone help ?

Currently , The Morris legends appears as below with the code:

The code for Morris - jQuery

var chart=  Morris.Line({
    element: 'status-req',
    data: <?=json_encode($jsonDataArray)?>,     
    xkey: 'y',
    ykeys: <?=json_encode($deliveryAspect['statusKeys'])?>,
    labels:  <?=json_encode($deliveryAspect['statusLabels'])?>,
    hideHover: 'auto',
    resize: true,      
    smooth:true       
});

chart.options.labels.forEach(function(label, i) {
    var legendItem = $('<span align="center"></span> ').text(label).css('color', chart.options.lineColors[i])
    $('#legend').append(legendItem);
});

• javascript
• jquery
• morris.js

1 Answer 1

The problem is solved using the below code. CSS

.mbox {   
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 10px 55px 10px 25px;
    padding-left: 4px;
}

jQuery

chart.options.labels.forEach(function(label, i){
    var legendlabel=$('<span style="display: inline-block;">'+label+'</span>')
    var legendItem = $('<div class="mbox"></div>').css('background-color', chart.options.lineColors[i]).append(legendlabel)
    $('#legend').append(legendItem)   
})