Блог

Я хочу отобразить точки на линейном графике chart.js однако точки первая и последний индекс по оси x отображаются не полностью, как показано на рисунке

Как я могу увеличить разрыв между первым и последним значениями оси x по сравнению с осью y. Вот мой код для диаграммы

 var config = {
        type: 'line',
        data: {
            labels: ['1809_1970', '1971_1975', '1976_1980', '1981_1985', '1986_1990', '1991_1995', '1996_2000','2001_2005','2006_2010','2011_2012','2013_2015'],
            datasets: [d1,d2,d3]
        },
        options: {
            responsive: true,

            title: {
                display: true,
                text: 'points chart',

                    },
            tooltips: {


                callbacks: {
                label: function(tooltipItem, data) {
                var label = data.datasets[tooltipItem.datasetIndex].cui[tooltipItem.xLabel] || '';
                return 'CUI' ' :: ' label ;

                },
                afterLabel: function(tooltipItem, data) {

                                var cui_name =  data.datasets[tooltipItem.datasetIndex].cui_name[tooltipItem.xLabel] || '';
                                return ['NAME' ' :: ' cui_name];
        }

            }

            },

            hover: {
                mode: 'index',
                intersect: true
            },
            pan: {
                    enabled: true,
                    mode: 'y'
                },
                zoom: {
                    enabled: true,
                    mode: 'y',
                    speed: 0.025


                },
                    scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Time Frame'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Score'
                    }
                }]
            }

        }
    };
  

Мне нужно было выполнить то же самое, и я смог получить желаемый результат путем добавления offset: true к xAxes параметрам.

 xAxes: [{
  offset: true, // <-- This right here
  display: true,
  scaleLabel: {
    display: true,
    labelString: 'Time Frame'
  }
}],