Bumpy graphs with the "smooth" line option

[Narcha]

Is your feature request related to a problem? Please describe. The "smooth" line option's interpolation produces a bumpy line for linearly increasing data.

Describe the solution you'd like It should produce a straight line, like chart.js.

Describe alternatives you've considered If possible, use a different interpolation algorithm that produces smoother output lines.

Additional context This is a test dataset with linearly increasing values. chart.js produces a straight line, ApexCharts adds a bump on every data point. This issue is always noticable if a dataset has repeated changes in the same direction (multiple increases or decreases after eachother)

[Fingel]

This is especially apparent when trying to do something like plotting a regression line over data.

[fintara]

I think catmullRom looks much smoother. Even though there are no plans for adding more curve options (#821), how feasible is it to change the interpolation algorithm behind smooth?

[gbenchanoch]

I am loving ApexCharts, but the line smoothing is a huge issue for dashboard creation. I've never seen a chart presented like this in any capacity, whether it be in academia or corporate. Is there any plan for improving the smooth line to something closer to ggplot, or is this a non-starter for the devs?

[chipimix]

I am loving ApexCharts as well but the line interpolation really needs some extra love! Here's an example of a sine function with linear ('straight') interpolation versus 'smooth' interpolation (green line)

straight:

smooth:

As you can see, the straight line option actually looks smoother than the smooth line option for the sinuous line. It's a shame there are no plans to add more curve options :'(

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[daviddavid]

Bumping this issue to keep it alive. I think it's essential for ApexCharts to offer smooth lines. The current "smooth" implementation is worthless, for anything but controlled examples, and straight lines only look good if you happen to have lots of smooth data points.

[LukasGirsch]

Any update on this? Maybe there is a setting we are missing?

[JorgenSolli]

I'd also love for this to be improved. Currently having to opt for straight lines, sadly :(

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Narcha]

Bumping this for the same reasons as last time

[FrnchFrgg]

I think that Monotone cubic interpolation would be a much better interpolation for apexcharts. It respects extrema and since --the chosen tangent (before correction) is parallel to the line joining the two neighboring points,-- it avoids squiggling in the example cases here.

EDIT: my memory was imprecise; the tangent slope at a non-extremum point is the mean of the slope of the neighboring straight lines in a non-smooth graph. The conclusion still holds, and this is equivalent if the points are equally distant from each other along the x axis.

[FrnchFrgg]

Note that https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Line.js#L615 says that the algorithm apexcharts uses is based on chartist which implements monotone cubic interpolation there: https://github.com/gionkunz/chartist-js/blob/develop/src/scripts/interpolation.js#L240

Maybe that interpolation was added afterwards, but since the apexcharts dev seem familiar with the chartist implementation it may help implementing monotone cubic interpolation here. I tried to make sense of the apexcharts smoothing code, but AFAICT as it is it only passes two points to the smoothing routine (the two extremities of a segment) where monotone cubic needs four (the leftmost point of the segment to the left, and the rightmost point of the segment to the right, in addition to those already passed).

AFAICT again, the current apexcharts smoothing code handles segments separate from each other, and thus has to chose an horizontal tangent for continuity purposes. This is of course the best when the point is an extremum, but it is also the reason for the artifacts seen here.

[JorgenSolli]

Note that https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Line.js#L615 says that the algorithm apexcharts uses is based on chartist which implements monotone cubic interpolation there: https://github.com/gionkunz/chartist-js/blob/develop/src/scripts/interpolation.js#L240

Maybe that interpolation was added afterwards, but since the apexcharts dev seem familiar with the chartist implementation it may help implementing monotone cubic interpolation here. I tried to make sense of the apexcharts smoothing code, but AFAICT as it is it only passes two points to the smoothing routine (the two extremities of a segment) where monotone cubic needs four (the leftmost point of the segment to the left, and the rightmost point of the segment to the right, in addition to those already passed).

AFAICT again, the current apexcharts smoothing code handles segments separate from each other, and thus has to chose an horizontal tangent for continuity purposes. This is of course the best when the point is an extremum, but it is also the reason for the artifacts seen here.

Thanks for this! I might jus be migrating to Chartist for this. At least until, hopefully, this is added to ApexCharts... lineSmooth: Chartist.Interpolation.monotoneCubic seems to work wonderfully with my dataset.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Narcha]

This is still relevant.

[JaspervanderSter]

Is there any way to contribute to this by implementing alternative smoothing algorithms, so one can choose one like in chartist? (lineSmooth: Chartist.Interpolation.monotoneCubic)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JorgenSolli]

This is still relevant.

[kimdanielarthur]

Thanks for a great charting library! Would be awesome with additional interpolation options in order to communicate well the underlying data

[Tiagolm]

Yes, a real smoothing would be appreciated, we have to rely on the straight lines for now

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Narcha]

This is still relevant.

[PeterMarkley-iTickets]

So do I understand correctly that one of the holdups on this is the amount of data getting passed to the interpolation routine, as FrnchFrgg mentioned here? So a new interpolation option would require a refactor that allows two extra data points?

Adding my voice to those affected by this issue and looking forward to a solution. 🙂

[katemccubbins]

Looking forward to a solution! I might not be able to use this library without the option of a smoother line.

[aaronguostudio]

The same here, I am building a chart for financial application, users for sure want to see the trend is going upward without the bumps :)

[katemccubbins]

The same here, I am building a chart for financial application, users for sure want to see the trend is going upward without the bumps :)

I ended up using Chart.js for my application. The lines were perfect!

[junedchhipa]

A new option has been added since v3.42.0.

stroke: {
  curve: "monotoneCubic"
}

https://apexcharts.com/docs/options/stroke/#curve

[OliverRomhagen]

Will it be possible in the future to have null values in the data for the line graph without it falling back from 'monotoneCubic' to 'straight'?