Legend placement goes haywire when any of the aspect ratio classes are used

[ghost]

I am using the "ct-major-second" class for making my chart responsive and auto resizing the bars and stuff.... but any of these classes set the css "top" property to "0" hence making the legend overlap. This can be fixed using custom css, but it isnt recommended as it wont keep the chart and the legend dynamic (i have many pages that use these charts, few having 2 bars, few 5, few 10, etc etc) and i wont be able to handle the height of the legend in all cases if i keep it static.

Is there any way in which i could place the legend outside the entire chart container

as it would be very easy to handle such a situation in that case.

If not how do you suggest i could handle this...?

[devzing]

Affecting me as well. Using ct-major-tenth

[tarekis]

Well, chartist-plugin-legend places the ul element inside of the chart container, either before or after the svg chart, depending on your options.

If you want the ul to be placed, this has to be done with JS, probably the best approach ist to fork and implement a position option for flexibilty:

chart.on('created', function (data) {
    // Append the legend element to the DOM
    switch (options.position) {
        case 'top':
            chart.container.insertBefore(legendElement, chart.container.childNodes[0]);
            break;

        case 'bottom':
            chart.container.insertBefore(legendElement, null);
            break;

        case 'outertop':
            // Some logic to place the chart outside of the chart container
            break;
        }
});

How good that is and if that should be PR'd into the master sometimes, i can't say really; you might run into some unexpected styling problems because the legend is now somewhere outside the container, depending on your implementation.

[SpaceK33z]

We could also allow the position option to take a DOM element. If a DOM element is given it attaches to that element instead of inside the chart. A PR is welcome for this, don't have the time myself atm.

[tarekis]

That sounds sweet too, might look into it sometime soon.

[tarekis]

Works as of 0.6.0. You can now enter any HTMLElement into the position option.

[tarekis]

I'm closing this as this should be resolved as of 0.6.0. If this issue remains, feel free to reopen it.