Draw series combination of solid and dashed line

[sidnaik03]

What problem does this feature solve?

To show future projection based on existing data. But existing data and projection should get displayed on same line.

What does the proposed API look like?

API should generate single line graph with combination of solid and dashed style

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[sidnaik03]

Any updates on this?

[ChrisShen93]

Any updates on this?

[gone369]

also need this feature. Please update

[kodze]

This feature would be awesome!

[dirslashls]

I am also interested in this feature. In the series.data, there is already a itemStyle option. Providing lineStyle option also at the data level can provide this feature.

[MostafaMAbdellateif]

Any update?

[MostafaGohar]

I found a workaround where you can turn your series from 1D data into 2D and instead of using 1 line, I used 3 lines.

For example turning

[10, 15, 5, 12, 20, 22, 12] into [ [0,10], [1,15], [2,5], [3,12], [4,20], [5,22], [6,12]]

And splitting the line into 3 lines:

• A "Current" line
• A "Hidden" line
• A "Future" line

The "Hidden" line is used to just bridge the gap between the current and future lines so the connect without overlapping in the tooltip when hovering over the "current" day or month or whatever your x-axis is. So it has tooltip.show: false and itemStyle.emphasis.label.show: false.

You should also hard code the legend.data to hide the hidden line from the legend. You can copy the series below here https://echarts.apache.org/v4/examples/en/editor.html?c=line-step to see how the chart looks

series:[
  {
    "name": "Test",
    "data": [
      [0,10],
      [1,15],
      [2,5],
      [3,12]
    ],
    "type": "line",
    "color": "#F00",
    "label": {
      "emphasis": {
        "show": true
      }
    }
  },
  {
    "name": "Test_Hidden",
    "data": [
      [3,12],
      [4,20]
    ],
    "type": "line",
    "color": "#F00",
    "lineStyle": {
      "color": "#F00",
      "type": "dashed"
    },
    "itemStyle": {
      "emphasis": {
        "label": {
          "show": false
        }
      }
    },
    "tooltip": {
      "show": false
    }
  },
  {
    "name": "Test",
    "data": [
      [4,20],
      [5,22],
      [6,12]
    ],
    "type": "line",
    "color": "#F00",
    "lineStyle": {
      "color": "#F00",
      "type": "dashed"
    },
    "label": {
      "emphasis": {
        "show": true
      }
    }
  }
]

[ngoctuan001]

IS there any update on this feature request, i think the need is reasonable.

Currently yes we can make a workaround by drawing 2 lines. But this only works well with no-smooth line. If the line chart require smooth (curve), then there is no curve in the connection part between solid and dotted line.

example:

[Osmon11]

The same issue!

[ahmadsufyan]

Nice feature to have !

[inhaq]

need this feature!