How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?


Tags: javascript,css,html5,chart.js,chart.js2

Problem :

I'm generating a Chart.JS bar chart that renders like so:

enter image description here

As you can see, the bottom of the legend and the top of the grid/graph are crammed together. Also, the individual bars are scrunched together more than strictly necessary, making the values a little hard to read; note that there is plenty of room left of the red bar and right of the blue bar. And there is plenty of space in the quadrant itself to add a shim or shiv of space between the legend the grid/graph.

How can I "air out" these elements to make the data more legible and the presentation more appealing?

Here is the code being used:

HTML

<div class="row">
    <div class="col-md-6">
        <div class="bottomleft">
            <h2 class="sectiontext">Forecast/Impact Analysis</h2>
            <div class="graph_container">
                <canvas id="forecastLineChart"></canvas>
            </div>
        </div>
    </div>
    . . .

CSS

The "row" and "col-md-6" classes are Bootstrap. "graph_container" must be a Chart.JS class (it's not one of mine).

.bottomleft {
    margin-left: 16px;
    padding: 16px;
    border: 1px solid black;
}

.sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
    color: green;
    margin-top: -4px;
}

JAVASCRIPT/jQuery

    var ctxForecastChart = $("#forecastLineChart"); 
    var forecastChartData = {
        labels: ["Total Sales"],
        datasets: [
        {
            label: "8/28/2016 - 9/3/2016",
            backgroundColor: "rgba(255,0,0,0.75)",
            hoverBackgroundColor: "rgba(255,0,0,1)",
            data: [1631437.17]
        },
        {
            label: "9/4/2016 - 9/10/2016",
            backgroundColor: "rgba(255,153,0,0.75)",
            hoverBackgroundColor: "rgba(255,153,0,1)",
            data: [1523898.94]
        },
        {
            label: "9/11/2016 - 9/17/2016",
            backgroundColor: "rgba(255,255,0,0.75)",
            hoverBackgroundColor: "rgba(255,255,0,1)",
            data: [1755669.93]
        },
        {
            label: "9/18/2016 - 9/24/2016",
            backgroundColor: "rgba(0,255,0,0.75)",
            hoverBackgroundColor: "rgba(0,255,0,1)",
            data: [1873205.42]
        },
        {
            label: "9/25/2016 - 10/1/2016",
            backgroundColor: "rgba(0,0,255,0.75)",
            hoverBackgroundColor: "rgba(0,0,255,1)",
            data: [1838204.79]
        }]
};

var forecastOptions = {
    tooltips: {
        enabled: true
    },
    animation: {
            duration: 500,
            easing: "easeOutQuart",
            onComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font 
Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal'
Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset) {
                    for (var i = 0; i < dataset.data.length; i++) {
                        var model = dataset._meta[Object.keys(dataset._met
[0]].data[i]._model, scale_max = dataset._meta[Object.keys(dataset._met
[0]].data[i]._yScale.maxHeight;
                        ctx.fillStyle = '#444';
                        var y_pos = model.y - 5;
                        if ((scale_max - model.y) / scale_max >= 0.93)
                            y_pos = model.y + 20;
                        ctx.fillText(addCommas(dataset.data[i]), model.x
y_pos);
                    }
                });
            }
        }
    };

var forecastBarChart = new Chart(ctxForecastChart, {
    type: 'bar',
    data: forecastChartData,
    options: forecastOptions
});

UPDATE

It's not a complete solution, but I improved it this way:

<canvas id="forecastLineChart" height="190"></canvas>

IOW, I added the height value to the canvas, so that the grid/graph now fills the quadrant better:

enter image description here

It sill could use commas, perhaps, for the y axis numbers, and the bars could spread out horizontally more, though.



Solution :

Inside your variable forecastOptions, you just need to add the so-called scales option.

var forecastOptions = {
    scales: {
        xAxes: [{
            barPercentage: 0.7,
            categoryPercentage: 1
        }]
    },
    tooltips...

This adjusts the width of the bars (barPercentage) and that of all the bars as a whole (categoryPercentage)

You can change 0.7 to however wide you want it to get. The extra space around all the bars is due to the fact that they fall under the same category, and that option is set to 0.8 as default, meaning that the 5 bars will only take up 80% as a whole.

Hope this helps


    CSS Howto..

    How to manage multiple css files in rails 4?

    How to keep floated width of divs to stay exact instead of 100%?

    How to fit content of a DIV with fixed height

    How to temporarily add a CSS style?

    How to tell the code to choose between two variables and make them equal?

    How to make smooth animation in css?

    How to make div position fixed without floating

    How can I convert a SASS file to a CSS file in an ANT task?

    How quora put that image on their home page? [closed]

    How can I read a CSS property value using Javascript?

    How can I make the height of a div section to automatically adapt to the height of its content?

    How to make half-square background in css

    How to style input type file using css

    How do i make part of a CSS background fit perfectly to a browser

    drawing a image like shown

    Hide field on small viewport, click button to show again

    jQuery - How to aply custom CSS to fields which are not empty

    Jquery Dropdownlist not shows the selected item.?

    CSS how to align group of elements horizontally?

    HTML: Who takes care show/hide the scrollbar?

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    How to add text using css in textarea? [closed]

    How to override a css !important property using jQuery with transitions

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to apply this effect to the last line of a text?

    Colorbox's overlay not showing

    How to edit menu in header - wordpress

    How can I center the page to allow background on sides?

    How to “add details” to CSS (example Box shadow)

    How to select col id using jquery to hide via css