Creating a red title and a shadow box with Apache ECharts?

Question

In this demo I'm trying to make the title red and create a shadow blur, however the settings are not having any effect.

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false
});
var app = {};

var option;

option = {
  title: {
    color: "red",
    show: true,
    shadowBlur: 5,
    shadowColor: "red",
    shadowOffsetX: 25,
    shadowOffsetY: 25,
    text: "Main Title",
    subtext: "Sub Title",
    left: "left",
    top: "center",
    textStyle: {
      fontSize: 30
    },
    subtextStyle: {
      fontSize: 20
    }
  }
};

Any ideas?

Answer 1

The color of the title text has to be set under textStyle; the same goes for subtitle and subtextStyle.

The shadow doesn't show because the background color is by default 'transparent'; you may set it to the chart's background color, white, to activate.

So the option should be something on the lines of

option = {
  title: {
    //show: true, // default
    backgroundColor: "white",
    shadowBlur: 5,
    shadowColor: "red",
    shadowOffsetX: 25,
    shadowOffsetY: 25,
    text: "Main Title",
    subtext: "Sub Title",
    left: "left",
    top: "center",
    textStyle: {
      color: "red",
      fontSize: 40
    },
    subtextStyle: {
      fontSize: 20
    }
  }
};

codesandbox fork.