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 can I join background images?

    How to add a banner inside a div at the bottom?

    How to use commas in a CSS variable fallback?

    How to construct CSS selector targeting attribute with value containing an ASCII line feed?

    How can I retrieve infos from PHP DOMElement?

    How to place Facebook send dialog box above other content?

    How to setup a multi-department form using JavaScript

    How to call multiple classes of CSS in a single class?

    How to fit content of a DIV with fixed height

    How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]

    how to combine the css selector using “:not”

    CSS selectors: how to make element hovering change wrapper's style

    How can I get the
    div to properly wrap my two buttons?

    How to get a different link color on my tumblr static page then my main (front page?)

    How to have dynamic image as CSS background?

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to make submit input and text input equally spaced

    form not showing up properly in chrome and IE6

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    How to give viewers custom CSS option

    How to style a subset of some text in HTML/CSS?

    How to place a div on right side of cascading tables - CSS

    how to make Sections in one line?

    How to center a child element in CSS, even if it is larger than the parent?

    How to create dynamic table 4 columns per row using GridView?

    divs hide and show

    How do you add multile vendor prefixes to one css property?

    CSS 3D containers like shown in post

    How to gray out a HTML element

    How to make this rounded shape with css [duplicate]