line-charts | A library for plotting line charts in SVG | Chart library

I saw that in the .NET version of LightningChart that there is a way to add breaks in line charts. Is this possible in the JS version as well? I saw someone ask a similar question a couple years ago, but hoping that this has been implemented since then.

I've looked through the documentation and examples and didn't couldn't find anything. I'm hoping to replicate something that looks like this in ApexCharts: https://apexcharts.com/javascript-chart-demos/line-charts/null-values/

Is there a way to make an XY lightning chart move its xAxis at a set interval?

Scenario: I currently have an XY chart that's tied to a process that emits data every second. The chart updates correctly, but the xAxis moves over very quickly and then pauses until the next event. I'm hoping to make this more of a smooth process between each second interval.

I've worked with Apex charts in the past and here's an example that shows the xAxis gradually being added: https://apexcharts.com/javascript-chart-demos/line-charts/realtime/

Is there a way to make lightningcharts act in this same manner?

I am working to replicate the plotly density plot example here in R. The code used on the example page is

In the website of plotly express, there is an example to use "symbol" and "markers" as an argument for the line function :

UPDATE (11/19/21): Added Additional Solutions

Most of you probably don't remember me from my previous question, Circles not updating correctly for multiline charts with two-level nested data. I managed to figure out/work around my issue there (although I still am not convinced that what I came up with is 100% correct); however, I now have another question.

My y-axis data (d.mval) has extreme outlier values. As a result, my charts get compressed, with quite a bit of blank space. See, for example, the "Cash Flow" chart in this JSFiddle: https://jsfiddle.net/etonblue/a98m52k4/3/. I've tried various combinations of median, mean, average, std dev, etc., to try to set the domains, but haven't yet found a solution that works consistently for all of my data. So I've resorted to hard-coding my domains:

How would do you get the values from the red line in this plot below?

Second graph: https://plotly.com/python/line-charts/

my attempt:

I'm creating a timeline with Apex Chart. I want to load data dynamically from a JSON. You can see how it looks like with hard coded data here.

My data.json looks like this:

My component has to render an object to fill the content. When I am working in the Vue project, I have not problem to pass this object with

I'm currently using Apexcharts to display a data series. In one of the options, I can select an array of colors as defined in the documentation, which is an array of strings. Obviously, passing in hex strings works just fine.

However, what I'm trying to do now is to have my data series on my graph show with patterns. I understand that I can use the fill object as defined here, but that would define a pattern for the whole graph, whereas I would like to define it for certain data only.

Since the color array is an array of strings, is there a way where I can define something like linear-gradient or something equivalent but in string format?

EDIT:

As an example, suppose I have this data series from the Apexchart website. Is there a way that I can set a condition, say if the person is 'Joe' and the type is 'test', then set the gradient to be something (for example gradient: slantedLines)?

The result would therefore be something like:

EDIT2:

I have also seen another question whereby we can specify the property fillColor to specify the color of a given bar in this post. Is there an equivalent to explicitly set the gradient?