Line artifacts

[dborowiec10]

Hi

I am trying to plot a line chart and I seem to be getting these artifacts.

[mikhail-vl]

@dborowiec10 Could you please share your script to investigate.

What do you mean by artifacts?

[dborowiec10]

By artifacts I mean the thinner lines showing alongside the main (thicker) line.

My script is:

const zeries = {}

data.series.forEach((s) => {
  let t = s.fields.filter((ss) => ss.name === "Time")[0]
  let exp = s.fields.filter((ss) => ss.name === "Experiment ID")[0]
  let sf = s.fields.filter((ss) => ss.name === "Scale Factor")[0]
  let v = s.fields.filter((ss) => (ss.name !== "Time" && ss.name !== "Experiment ID" && ss.name !== "Scale Factor"))[0]
  for (let i = 0; i < t.values.buffer.length; i++) {
    if (!(exp.values.buffer[i] + " SF:[" + sf.values.buffer[i] + "]" in zeries)) {
      zeries[exp.values.buffer[i] + " SF:[" + sf.values.buffer[i] + "]"] = { min: Number.MAX_VALUE, entries: [] }
    }
    if (t.values.buffer[i] < zeries[exp.values.buffer[i] + " SF:[" + sf.values.buffer[i] + "]"].min) {
      zeries[exp.values.buffer[i] + " SF:[" + sf.values.buffer[i] + "]"].min = t.values.buffer[i]
    }
    zeries[exp.values.buffer[i] + " SF:[" + sf.values.buffer[i] + "]"].entries.push({ "t": t.values.buffer[i], "v": v.values.buffer[i] })
  }
})

const series = []
for (const item in zeries) {
  let outt = zeries[item].entries.map((timez) => { return [timez.t - zeries[item].min, Number.parseFloat(timez.v.toFixed(2))] })
  series.push({
    name: item,
    type: 'line',
    sampling: 'lttb',
    symbolSize: 2,
    lineStyle: {
      width: 1,
    },
    data: outt,
    smooth: true
  })
}

return {
  animation: true,
  backgroundColor: 'white',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    type: 'scroll',
    orient: 'horizontal',
    bottom: 0,
    data: series.map((s) => s.name),
    icon: 'rect',
    textStyle: {
      color: 'rgba(0, 0, 0, 1)',
    },
  },
  xAxis: {
    type: 'time',
    axisTick: {
      show: true,
    },
    axisLine: {
      show: true,
    },
    axisLabel: {
      color: 'rgba(0, 0, 0, 1)',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(128, 128, 128, 0.23)',
      },
    },
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      color: 'rgba(0, 0, 0, 1)',
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(128, 128, 128, 0.23)',
      },
    },
  },
  grid: {
    show: true,
    left: 0,
    right: 16,
    top: 6,
    bottom: 24,
    containLabel: true,
  },
  series: series,
};

[dborowiec10]

I have found that setting the:

lineStyle: {
  width: 0,
},

fixes the issue

[mikhail-vl]

@dborowiec10 Nice catch! I expected it to be something in the configuration.

We always recommend to look at the examples (https://echarts.apache.org/examples/en/index.html), which are very well done and then look at the cheat sheet (https://echarts.apache.org/en/cheat-sheet.html) to dig deeper.

Please let us know if you need anything else.

[dborowiec10]

To be fair, I believe this might be a hacky solution for my specific use-case as when I try to enable area under the line, this problem persists.

Here is a screenshot of 4 series and area under line enabled

[mikhail-vl]

@dborowiec10 I don't fully understand your use-case, but maybe you are using wrong chart type?

Have you looked at Scatter? https://echarts.apache.org/examples/en/editor.html?c=scatter-simple

[mikhail-vl]

@dborowiec10 Please let me know if you able to solve your issue or require further assistance.