Search code examples
echartsapache-echarts

Echarts markLine doesn't appear. (Bar Chart)


im trying to create two markLines with my averages (yearly and last 13 weeks) the first markline will be my yearly average with a small tooltip position around January. My second one will be my last 13 weeks averages with a small position at around july. The screenshot below is what I have.

enter image description here

Here is a screenshot the small tooltip. Has to be a markline too.

enter image description here

Here are my options. MarkLine doesn't appear at all.

     xAxis: [
        {
          type: "category",
          data: Object.keys(resultObject),
          show: false,
        },
        {
          position: "bottom",
          type: "category",
          data: categories.map((category) => category.charAt(0)),
          xAxisIndex: 2,
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: {
        show: false,
        type: "value",
      },
      series: [
        {
          data: Object.values(resultObject),
          type: "bar",
          itemStyle: {
            color: (seriesIndex) =>
              seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
          },
          markLine: {
            data: {
              name: "Horizontal line with Y value at 100",
              yAxis: 100,
            },
          },
        },
      ],

Solution

  • You have a syntax error. The data property is a list of markLine objects, which are specified by either

    • A) a value at an axis (eg. yAxis: 200 or type: 'average') or
    • B) a list of two points (eg. coord: [10,20] or type: 'min')
    markLine: {
        data: [
            // case A
            {yAxis: 200},        // example 1
            {type: 'average'},   // example 2
    
            // case B
            [
                {coord: [10, 20]},    // example 1
                {coord: [50, 300]}
            ],
    
            [
                {type: 'min'},        // example 2
                {type: 'max'}
            ],
    
            [
                {coord: [10, 20]},    // example 3
                {type: 'max'}
            ]
        ]
    }
    

    Here is a small example.