Skip to content

Incorrect rendering when null value exists in the data with Threshold options #5209

@unborn-andy

Description

@unborn-andy

Description

Incorrect rendering when null value exists in the data and colorAboveThreshold, colorBelowThreshold option is used.

Steps to Reproduce

A chart with the following data and options will render incorrectly

      series: [
        {
          data: [60, 63, 60, 87, -50, -50, null, 100, 120, 138],
        },
      ],
      chartOptions: {
        chart: {
          type: 'area',
          height: 350,
        },
        plotOptions: {
          line: {
            isSlopeChart: false,
            colors: {
              threshold: 0,
              colorAboveThreshold: 'rgba(0, 136, 238, 0.30)',
              colorBelowThreshold: 'rgba(255, 0, 0, 0.30)',
            },
          },
        },
        dataLabels: {
          enabled: false,
        },
        xaxis: {
          categories: [
            'Korea',
            'Canada',
            'United Kingdom',
            'Netherlands',
            'Italy',
            'France',
            'Japan',
            'United States',
            'China',
            'Germany',
          ],
        },
      },
    };

Screenshots

Image

Reproduction Link

https://stackblitz.com/edit/vue-bar-chart-gmrjjet5?file=src%2FApp.vue

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions