javascriptechartsapache-echarts

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


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?


Solution

  • 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.