Is it possible to visualize null values with a custom representation?

Question

I am trying to visualize null values in a bar chart and my goal would be to represent nulls with something like an empty transparent bar with a text label. I tried it with the visualmap component but this unfortunately doesn't work.
Here is small example:
https://codesandbox.io/s/focused-mirzakhani-tvcqx7?file=/src/index.js

Answer 1

Update: A better approach that doesnt modify your null values using a dummy dimension in dataset and visual maps:

example

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const dataset = [
  { day: 'Mon', value: 120, dummy: 0 },
  { day: 'Tue', value: 70, dummy: 0 },
  { day: 'Wed', value: null, dummy: 50 },
  { day: 'Thu', value: 80, dummy: 0 },
  { day: 'Fri', value: null, dummy: 50 },
  { day: 'Sat', value: 110, dummy: 0 },
  { day: 'Sun', value: 130, dummy: 0 }
];

option = {
  dataset: [
    {
      dimensions: [
        { name: 'day', type: 'ordinal' },
        { name: 'value', type: 'number' },
        { name: 'dummy', type: 'number' }
      ],
      source: dataset
    }
  ],
  xAxis: [
    { type: 'category', position: 'bottom' },
    { type: 'category', position: 'bottom', show: false}
  ],
  yAxis: {},
  tooltip: {
    show: true
  },
  visualMap: [
    {
      type: 'piecewise',
      seriesIndex: 0,
      show: false,
      dimension: 1,
      min: 0,
      max: 200,
      splitNumber: 2,
      inRange: { color: ['blue', 'red'] }
    },
    {
      type: 'piecewise',
      show: false,
      seriesIndex: 1,
      dimension: 2,
      inRange: {
        color: 'grey',
        opacity: 0.3,
        colorLightness: 0.2,
      }
    }
  ],
  series: [
    {
      type: 'bar',
      encode: {
        x: 'day',
        y: 'value'
      }
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      encode: {
        x: 'day',
        y: 'dummy'
      }
    }
  ]
};

option && myChart.setOption(option);

---

Previous answer

You could use a dataset and specify one dimension to hold the info if the value was null or not and exchange null for some dummy value. Then it would be possible to use visual map.

I made an example:

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const dataset = [
  { day: 'Mon', value: 120, null: false },
  { day: 'Tue', value: 70, null: false },
  { day: 'Wed', value: 50, null: true },
  { day: 'Thu', value: 80, null: false },
  { day: 'Fri', value: 50, null: true },
  { day: 'Sat', value: 110, null: false },
  { day: 'Sun', value: 130, null: false }
];

option = {
  dataset: [
    {
      dimensions: [
        { name: 'day', type: 'ordinal' },
        { name: 'value', type: 'number' },
        { name: 'null', type: 'ordinal' }
      ],
      source: dataset
    }
  ],
  xAxis: {
    type: 'category',
    data: dataset.map((item) => item.day)
  },
  yAxis: {},
  tooltip: {
    show: true
  },
  visualMap: [
    {
      type: 'piecewise',
      show: false,
      dimension: 1,
      min: 0,
      max: 200,
      splitNumber: 2,
      inRange: { color: ['blue', 'red'] }
    },
    {
      type: 'piecewise',
      show: false,
      dimension: 2,
      categories: [true, false],
      inRange: {
        opacity: [0.3, 0.8],
        colorLightness: [0, 0.5]
      }
    }
  ],
  series: [
    {
      type: 'bar',
      encode: {
        y: 'value'
      }
    }
  ]
};

option && myChart.setOption(option);