Skip to content

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

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"

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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