Chart.js and free space on the right

I wanted to ask if there is a way to click the chart on the right side, so there will be no free space. I attached a simple image, a red line, that this space should also be filled with a diagram.

Is it also possible to create vertical lines as dots? I can not find the answers to my questions in an official documententer image description here

This is my javsacript code:

 var lineChartData = {
                            labels : ["January","February","March","April"],
                            datasets : [
                                {
                                    label: "Dataset",   
                                    pointHighlightStroke : "rgba(220,220,220,1)",
                                    data : [0,3,4,11]
                                }
                            ]
                        };


                        window.onload = function(){
                            var ctx = document.getElementById("canvas").getContext("2d");
                            window.myLine = new Chart(ctx).Line(lineChartData, {

                                responsive: true,
                                scaleOverride: true,
                                scaleSteps: Math.ceil((max-start)/step),
                                scaleStepWidth: step,
                                pointDot : false,
                            });
                        }
+4
source share
1 answer

Space is because the last x-axis label (April). Chart.js leaves enough space for the tag to not be clipped. This also ensures that the tooltip for the last point is displayed without clipping.

( ) , . . , , x, .

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        var labels = data.labels;
        data.labels = data.labels.map(function () { return '' });
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.datasets[0].points.forEach(function (point, i) {
            point.label = labels[i]
        })
    }
});

, LineAlt Line.


Fiddle - http://jsfiddle.net/0u2c7tez/

. , , , ( ) (. https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html)

+3
source

Source: https://habr.com/ru/post/1614239/


All Articles