ChartJS - legends and tooltips options

Question

This is the first time I'm using ChartJS v2. I creating a simple line chart with several datasets.

I have 3 problems:

1 - It has the correct data shown, but I have a problem with the legends, as they appear left aligned with the color box out of the canvas, and one per line like in the image bellow (https://i.sstatic.net/c9qBe.png).

I want the legends like float: left; in css.

2 - Other problem is the tooltips, they're very big.. like shown in the image bellow. (https://i.sstatic.net/txXCF.png)

I tried to find the options to achieve this but it hard for me to make it work.

3 - I want the interval in the y-axis to be 1 not 0.1.

Bellow is the JS code used to create the chart:

        var scripts = $(".sending-data");
        var datasets = [];
        var days = [];

        var counter = 0;
        scripts.each(function (index, script){

            var json = JSON.parse(script.innerHTML);
            var data = [];

            for (var i = 0; i<json.DATA.length; i++) {
                data.push(json.DATA[i][2]);
                if (counter === 0)
                    days.push(json.DATA[i][1].substr(8, 2));
            }

            var r = Math.floor((Math.random() * 255) + 1);
            var g = Math.floor((Math.random() * 255) + 1);
            var b = Math.floor((Math.random() * 255) + 1);
            var rgbStr = r+ ", " +g + ", " + b;
            console.log(rgbStr);


            datasets.push({
                label: "## " + $(script).attr("data-send-id"),
                backgroundColor: 'rgba('+rgbStr+', 0.2)',
                borderColor: 'rgba('+rgbStr+', 1)',
                borderWidth: 2,
                lineTension: 0.1,
                data: data,
                fill: false
            });
            counter++;
        });

        var config ={
            type: 'line',
            data: {
                labels: days,
                datasets: datasets
            },
            options: {
                title: {
                    display: true,
                    text: 'Custom Chart Title'
                },
                responsive : true,
                legend: {
                    fullWidth: false,
                    boxWidth: 50,
                    padding: 40,
                    position: "top",
                    display: true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            stepSize: 1
                        }
                    }]
                }
            }
        };

    var ctx = document.querySelector("##canvas-chart").getContext("2d");
    console.log(document.querySelector("##canvas-chart"));
    var myLine = new Chart(ctx, config);

Dont mind the '##' selector, I'm using CFusion. Any help from you guys?

--DISCLAIMER-- I managed to set the stepSize: 1 so the interval is 1. But still have the problem (1) and (2)

Thanks in advance! Happy Programming!

Answer 1

So the problem is this - I'm dumb..

hahaha

The dataset labels had a lot of whitespace... so I just replaced all " " by "" and it showed correctly..

Thanks to all of you. Cheers and happy programming!