[Chartjs]-How to draw a range label on x axis using chartJS

by

2👍

✅

Look, in versions 2.1.5 forward you can use nested labels and kind of get the desired behavior: a second line of labels, where you can show secondary information in certain places.

var data = {
      labels: [['2015','Backtested'], '2016', '2017', ['2018', 'Live'], '2019', '2020'],

          datasets: [
            {
              label: "Set 1",
              data: [ 100, 200, 150, 250, 270, 300 ],
              backgroundColor: 'rgba(54, 162, 235, 0.2)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1
            },
            {
              label: "Set 2",
              data: [ 60, 250, 130, 300, 330, 340 ],
              backgroundColor: 'rgba(255, 99, 132, 0.2)',
              borderColor: 'rgba(255,99,132,1)',
              borderWidth: 1
            }
          ]
    };

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{

      }]
    }
  }
});

JSFiddle

Kudos:

[1] ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2

UPDATE:

I had to make little more workout to get the same work in time series (where you do not define labels directly by yourself, EXCEPT with a Tick callback) and finally got the results like shown here:

var canvas = document.getElementById('chart');

var s1 = [{x:"2017-01-06 18:39:30",y:"70"}, {x:"2017-01-07 18:39:30",y:"100"},{x:"2017-01-08 08:39:28",y:"101"}];
var s2 = [{x:"2017-01-06 08:39:30",y:"100"},{x:"2017-01-07 18:00:00",y:"90"},{x:"2017-01-08 18:00:00",y:"105"}];

var graphParams = {
    type:"line",
  data:{
        datasets: [{
            label:"Series 1",
            data:s1,
            borderColor:"red",
            backgroundColor:"transparent",
      xAxesGroup:"A"
        },
        {
            label:"Series 2",
            data:s2,
            borderColor:"blue",
            backgroundColor:"transparent",
      xAxesGroup:"A"
        },
    ],
    },
    options:{
        maintainAspectRatio:false,
        responsive:true,    
        scales:{
            xAxes:[{
        name:"A",
                type:"time",
                distribution: "linear",
        },
        {
        name:"B",
        type:"time",
        time: {
          unit: 'day'
        },
        ticks: {
            callback: function(value, index, values) {
               if (value == "Jan 7, 2017") {
                    return "Start";
               } else if (value == "Jan 8, 2017") {
                    return "Live";
               } else {
                    return "";
               }
            }
            }
        }
      ],
    }
    }
 };

ctx = new Chart(canvas, graphParams);

JSFiddle tells the results in live.

Important notes: I needed a name for xAxes and map it to data with xAxesGroup and a B group with no data, where I attached the custom handler for titles and made the resolution in days, so that there are identifiable place for the label in chart.

Leave a comment