Skip to content

Category axis: "null" values are displayed using the first value #8667

@mikioma

Description

@mikioma

"null" values used to be skipped from the chart. From versions 2.9.1+ they are displayed when using a "category" axis

Steps to reproduce
You can use https://jsfiddle.net/mikioma/u2poq901/

  • Use chartjs version 2.9.0 or before
  • Use the following chart configuration
    var labels = ['One', 'Two', 'Three', 'Four', 'Five'];
    var config = {
        type: 'line',
        data: {
            yLabels: [5, 4, 3, 2, 1],
            datasets: [{
                borderWidth: 3,
                showLine: true,
                data: [
                    { x: new Date('2016-11-25'), y: 2 },
                    { x: new Date('2016-11-30'), y: 3 },
                    { x: new Date('2016-12-22'), y: null },
                    { x: new Date('2017-02-12'), y: 1 },
                    { x: new Date('2017-04-01'), y: 2 },
                    { x: new Date('2017-04-21'), y: 4 },
                    { x: new Date('2017-05-01'), y: 3 },
                    { x: new Date('2017-06-30'), y: 5 }
                ],
                fill: false,
                borderColor: 'red',
                backgroundColor: 'red'
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'week',
                        min: new Date('2016-11-05'),
                        max: new Date('2017-08-01'),
                        isoWeekday: true
                    },
                    display: true,
                    gridLines: { display: false },
                    scaleLabel: {
                        display: false,
                        labelString: ''
                    }
                }],
                yAxes: [{
                    type: 'category',
                    position: 'left',
                    display: true,
                    ticks: {
                        callback: function(value) { return labels[value - 1]; },
                        reverse: false
                    }
                }]
            },
            tooltips: {
                callbacks: {
                    label:
                        function(tooltipItem, data) {
                            return labels[tooltipItem.yLabel - 1];
                        }
                }
            }
        }
    };
    var Canvas = $("#Chart");
    var cc = new Chart(Canvas, config);
  • Note that the third value is "null"
  • Display the chart
  • All values are displayed except for the "null" one
  • Now use chartjs 2.9.1+
  • The "null" value is displayed as "Five"

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions