title: How to change the line style of ECharts custom graph from solid to dashed or dotted
body: <p>I created a custom graph using Apache <a href="https://echarts.apache.org" rel="nofollow noreferrer">ECharts</a> to draw a vertical line from the input data. Following <a href="https://echarts.apache.org/en/option.html#series-custom" rel="nofollow noreferrer">ECharts documentation</a> and some online examples, I was able to draw the line and custom it with color or width as per the MWE below.</p>
  <p>My question is how to configure the line style as dotted or dashed. I searched extensively but could not find any options or documentation on that.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const chart = echarts.init(document.getElementById("chart"));
  
  const render = (_, api) =&gt; {
    const start1 = api.coord([api.value(0), api.value(1)]);
    const end1 = api.coord([api.value(0), api.value(2)]);
    const x1 = start1[0];
    const y1 = start1[1];
    const x2 = end1[0];
    const y2 = end1[1];
    const line = {
      type: "line",
      shape: {
        x1,
        y1,
        x2,
        y2
      },
      style: {
        stroke: "blue",
        lineWidth: 3
      }
    };
  
    return {
      type: "group",
      children: [line]
    };
  };
  
  const options = {
    xAxis: {
      min: 0,
      max: 2,
      interval: 1
    },
    yAxis: {
      min: 0,
      max: 4,
      interval: 1
    },
    series: [{
      type: "custom",
      data: [
        [1, 1, 3]
      ],
      renderItem: render
    }]
  };
  chart.setOption(options);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;ECharts custom line&lt;/title&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js" integrity="sha256-TI0rIaxop+pDlHNVI6kDCFvmpxNYUnVH/SMjknZ/W0Y=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="chart" style="width: 50%; height: 200px; position: absolute; top:0; left:0"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>MWE: <a href="https://codesandbox.io/s/echarts-custom-vertical-line-442cv" rel="nofollow noreferrer">https://codesandbox.io/s/echarts-custom-vertical-line-442cv</a></p>