CODEWITHSUNDEEP
javascriptchart.js
bairog
bairog

Reputation: 3387

Chart.js - how to set a margin for axes min\max and time axis label separation

I have a Chart.js 2.9.4 chart that has time X-axis (displays a date). Sample code that I use:

var data = {
  datasets: [{
    label: "dataset1",
    lineTension: 0,  
    fill: false,  
    backgroundColor: '#43dea6',
    borderColor: '#43dea6',
    data: [{t:"2021-03-30T00:00:00",y:6},{t:"2021-04-01T00:00:00",y:3},{t:"2021-04-05T00:00:00",y:4},{t:"2021-04-12T00:00:00",y:7},{t:"2021-04-19T00:00:00",y:6},{t:"2021-04-26T00:00:00",y:8},{t:"2021-05-04T00:00:00",y:10},{t:"2021-05-11T00:00:00",y:10},{t:"2021-06-09T00:00:00",y:2},{t:"2021-06-16T00:00:00",y:3},{t:"2021-06-23T00:00:00",y:4}]
  },
  {
    label: "dataset2",
    lineTension: 0,  
    fill: false,  
    backgroundColor: '#e44269',
    borderColor: '#e44269',
    data: [{t:"2021-03-30T00:00:00",y:0},{t:"2021-04-01T00:00:00",y:3},{t:"2021-04-05T00:00:00",y:1},{t:"2021-04-12T00:00:00",y:1},{t:"2021-04-19T00:00:00",y:1},{t:"2021-04-26T00:00:00",y:0},{t:"2021-05-04T00:00:00",y:0},{t:"2021-05-11T00:00:00",y:0},{t:"2021-06-09T00:00:00",y:4},{t:"2021-06-16T00:00:00",y:3},{t:"2021-06-23T00:00:00",y:2}]
  }]
};

var options = {
    animation: false,    
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                            unit: 'day',
                tooltipFormat: 'DD.MM.YYYY',
                displayFormats: {
                    day: 'DD.MM.YY'
                }
            }
        }]
    }
};

var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
<div id="chartDiv"><canvas id="chart"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>

And I need 3 things:

  1. Set an automatic 5% margin for axes min\max. I know that I can calculate min\max values by myself and set them via ticks.min\ticks.max options, but it's not so easy and obvoius for time X-axis.
  2. Ensure that each point will definitelly have corresponding tick and label on X-axis.
  3. Set an automatic X-axis label separation (for my taste Chart.js draws them too close for each other).

Many charting libraries have axis margin options (in pixels or percents of axis full length), "labels at points" and label separation options (in pixels or percents of axis label width) - maybe Chart.js also has..

Here what I have now:

Here what I have now

Here what I need:

Here what I need

P. S. If some of that features are possible only in Chart.js 3.x - no problem, I can upgrade.

Upvotes: 1

Views: 2528

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31421

For your first problem afaik there is no other solution as to calculate it yourself, in V3 they added a grace property (docs) which does this but it only applies to linear axis.

For your second problem you can use the tick callback. You get the value and then you can check your data source if it has a point matched to it, if so you return it again, if not you can return an empty string. See this example for more info: https://www.chartjs.org/docs/master/samples/scale-options/ticks.html

For your third problem you can increase the autoSkipPadding (docs)

Upvotes: 1

Related Questions