0

EDIT: Here is a JSFiddle with the chart recreated. Any help would be appreciated. https://jsfiddle.net/lochrine/02yrpcxg/

I've checked some different sources and looked around the options, but I can't seem to be able to get my legend to stay in one column. For example,

messed up legend

In the picture above, you'll notice one piece of the legend is getting cut off and placed to the side. I would like to force them all to remain in one column. Here is the JS: 

    //Line Graph Script

    $('.line-graph').each(function () {
        var legendlabels = $(this).data('legendlabels');
        var datapoints = $(this).data('datapoints');
        var suppliers = $(this).data('suppliers');

        var datatype = $(this).data('datatype');
        var yAxisString = "Amounts";
        if (datatype == "units") { yAxisString = "Units Sold"; }
        else if (datatype == "money") { yAxisString = "Amount (Dollars)"; }

        console.log(datatype);

        new Chart($(this).get(0).getContext('2d'), {
            type: 'line',
            data: {
                labels: legendlabels,
                datasets: $.map(datapoints, function (e, i) {
                    return {
                        backgroundColor: lineChartColors[i],
                        borderColor: lineChartColors[i],
                        fill: false,
                        data: e,
                        label: suppliers[i],
                        lineTension: 0.2,
                    }
                })
            },
            options: {
                layout: {
                    padding: {
                        left: 20,
                        right: 40,
                        top: 20,
                        bottom: 20
                    }
                },
                legend: {
                    display: true,
                    position: 'left'

                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            callback: function (value, index, values) {
                                return addCommas(value);
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: yAxisString 
                        }
                    }]
                },
                plugins: {
                    datalabels: {
                        display: false
                    }
                },
                tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        var datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toString();
                        var label = data.datasets[tooltipItem.datasetIndex].label + ': ';
                        var formattedReturnLabel;
                        if (datatype == "money") {
                            formattedReturnLabel = label + '$' + addCommas(datasetLabel);
                        } else {
                            formattedReturnLabel = label + addCommas(datasetLabel);
                        }
                        return formattedReturnLabel;
                    }
                }
            }
            }
        });

    })

HTML:

<div class="widget widget-double">
    <div class="m-3 border">
        <table style="cursor: pointer !important;" onclick="window.location.href='@Url.Action("SupplierUnitsByMonth", "Reports")'" class="table mb-0"><thead><tr><th class="text-center">@ViewBag.widgetName</th></tr></thead></table>
        <div class="w-100 aspect-ratio-50 p-2">
            <canvas id="chart-units-history" data-legendlabels="[@ViewBag.Months]" data-suppliers= "[@ViewBag.suppliers]" data-datapoints="[@ViewBag.supplierTotals]" data-datatype="units" class="line-graph w-100 aspect-ratio-50"></canvas>
        </div>
    </div>
</div>
Locke
  • 131
  • 1
  • 10
  • 2
    Providing a link to a working example would make it much easier to help you. – Andy Hoffman Jan 11 '19 at 22:11
  • Sure. Sorry for the delay @AndyHoffman . I'll try and throw something together for you – Locke Jan 14 '19 at 14:14
  • @AndyHoffman https://jsbin.com/lediluj/1/edit?html,js,output – Locke Jan 14 '19 at 14:43
  • I couldn't find some of the libraries that I was using in JSBin, so I pasted them in to the beginning of the JS file myself. Scroll to the bottom of the JS file to see the relevant stuff. – Locke Jan 14 '19 at 14:44
  • You can see that when you resize the output window, at around <=550 pixels, it moves some of the labels into a second column. How can I force it not to do that? – Locke Jan 14 '19 at 14:45
  • Sorry, that JSBin crashed and lost some of the work. Very frustrating. Here is a fiddle instead https://jsfiddle.net/lochrine/02yrpcxg/ – Locke Jan 14 '19 at 15:05

0 Answers0