LightningChartJs point series disappears after changing angular route - javascript

I'm using LightningChartJs 2.0.2 in my Angular application.
In the chart I have a line and a point series implemented, what works like expected.
But if I change the route and come back to the chart the point series is not visible anymore. Tried with different environments without success. I'm also not able to locate the reason of the actual issue.
Following code shows the creation of the chart and series:
this.chart = lightningChart().ChartXY({container: `${this.chartId}`});
const lineSeries = this.chart.addLineSeries().setStrokeStyle((style) => style.setThickness(5));
lineSeries.add(this.points);
const pointSeries = this.chart.addPointSeries().setName('Points').setPointSize(6);
pointSeries.add(this.points);
On destroy the chart is disposed:
ngOnDestroy() {
// "dispose" should be called when the component is unmounted to free all the resources used by the chart
this.chart.dispose();
}
Normally the chart and all depenendencies will be destroyd at this point.
If I come back to the chart page the chart should be new created with all it's series, but the point series isn't.
Why the point series is not visible anymore and how to fix it?
Please see the stackblitz example! The chart handling is located in
/src/app/lc-test/lc-test.component.ts
Steps to reproduce the issue:
Change the route to LC Test. You see the line and point series.
Change back to Dashboard and again to LC-Test. The line series is visible and the point series not.
Used Chrome and Firefox on Mac.
lightningChart Js - stackblitz - point series disappears on route change issue
After playing a bit with the zoom options it looks like there is a rendering issue on the point series:
Normal behavior:
After route change and zoom into top section:

This was caused by a rendering issue in LightningChart JS v2.0.2. We have now fixed it in a v2.0.3 release. Thank you for bringing this issue to our attention.
With LightningChart JS v2.0.3 the app you provided is working as expected.

Related

Chart.js radar tooltip displaying too many values

So I am working on a chart.js project for a client and one of the charts they want is a radar chart of all their metrics. The image below is the sample chart
The issue I'm having is with the tooltips. In the default mode everything works fine except for the very center. There are several values that are zero and when I hover over them it displays all of them. What I need is for it to only display one.
I tried setting the mode to 'single' even though it is depreciated and that worked. However, that brought a new problem.
options: {
tooltips: {
mode: 'single'
}
}
When I hover over an element, the entire dataset highlights and the rest disappear. Its kind of hard to tell but the two images below are highlighting two different datasets, but since the points overlap slightly, the tooltip value is not updating
I am using the latest version of chart.js (2.9.3) as of posting this

Highcharts (column, candlestick) show mouseover tooltip anywhere on chart similar to line or area

I'm currently working on chart similar to this using highcharts
From what I have observed, column and candlestick chart will only trigger mouseover when I hover on the box itself, whereas line or area chart will have them anywhere on the chart like this
So I've tried some configurations to try make column and candlestick to behave the same way as line or area, but haven't successful yet.
Ultimately, this is the behaviour I want to achieve.
Would it be possible to change the mouseover behaviour of those charts to be the same as the line chart?
It is a bug which appeared in 5.0.8 version. You can see the closed ticket on github here which means that the fix will be included in the next release.
Until the release, you can use 5.0.7 version which works as you expect.
<script src="https://code.highcharts.com/stock/5.0.7/highstock.js"></script>
http://jsfiddle.net/q947fsa2/1/

flot stackpercent setdata bug

I'm trying to update a flot graph using the stackpercent plugin. I wish to include the ability for users to turn legend items on and off, the problem is the chart isn't redrawn properly. The maths for determining % is ignored when using the draw() function as a result the graph doesn't look correct.
This is a Documented bug. However, i don't see it being fixed anytime soon.
How can i fix this?

Issue with Highcharts master-slave chart

I Was checking out the possibility of implementing a zoomable line chart using Highcharts something that highstock line chart does and came across this example in the demo. This will really work fine for me but I have seen a issue with the chart that When I select complete data in the smaller chart, the Big chart isn't showing anything.
I Want to know how to fix this issue.
When you play with that example and check the JavaScript console for errors, you'll see:
Highcharts error #12: www.highcharts.com/errors/12
Following that link:
Highcharts Error #12
Highcharts expects point configuration to be numbers or arrays in
turbo mode
This error occurs if the series.data option contains object
configurations and the number of points exceeds the turboThreshold. It
can be fixed by either setting the turboThreshold option to a higher
value, or changing your point configurations to numbers or arrays. See
turboThreshold.
Shockingly enough, if increase or disable the turboThreshold, the problem goes away.
Fiddle here.

Highstock not rendering properly; displays empty series until zooming in

I've got Highstock running on a website loading two series from two different csv/log files on the same webserver.
I previously had this exact setup on a different server where it worked flawlessly.
On the new server, however, the chart doesn't render properly. When the page is loaded the series lines do not display. If you zoom in, or scroll away from the rightmost edge of the chart the lines pop into view. If you scroll back all the way to the right the lines stop displaying.
The actual chart can be seen here on this temporary page:
http://maxedin.com/pages/18/
The JS which loads the chart here:
http://jsfiddle.net/3Jpb3/
The chart is loaded with this div element:
<div id="mholmen" style = "width:100%"></div>
I've tried playing around with the different zoom options, chart sizes, modifying the data that's being loaded and such to no luck.
Has anyone else bumped into this same issue and managed to fix it?
In your data you have some NaN's, for example:
lines[2154]: Array[2]
0: NaN
1: NaN
Which can not be displayed on a chart. Make also sure that data doesn't contain duplitaced and is ordered for xAxis ascending.
Thanks to Pawel Fus I figured it out. Turns out the text editor nano which I used to view and edit the log files did some odd things while saving them. Editing the files in textwrangler fixed my problems. Go figure.

Categories