Trendline Chart bug

[sbaik]

This bug has been there for a while before and after updates.
When the cursor is anywhere on the chart left of that red line, the red line follows the cursor exactly. It stops where it is at in the picture when the cursor is past the right side of that. Meaning the data to the right can not be viewed by zoom/drag function. This is present on all size monitors of PC and phones.

[Jared Wiltshire]

Are you using ma-scale to scale the chart to the size of the screen or something? Is it only on this one page? Is it on the watch list or point details page chart?

[sbaik]

This post is deleted!

[sbaik]

Just noticed, it is due to the ma-scale-to on the background being set to ma-ui-page-view.
The customer uses various size monitors and phones so I would like to keep the scaling function.

[sbaik]

@Jared-Wiltshire Just this issue and I will be content for a while!

[Jared Wiltshire]

@sbaik unfortunately this will not be an easy thing to correct. I have definitely noticed that amCharts behaves a bit funny when it is scaled.

The only real way to deal with this is to rework the pages so they don't use ma-scale-to. You will have to give things sizes and positions in percentages instead of pixels. Maybe look into using AngularJS Material flex layouts or plain old CSS flexbox.

[MattFox]

Here's a hack I did with css to ensure the chart fits properly in a page. Not sure how well it will work for phones though...

<div class="chartwrapper">
<ma-serial-chart points="points" values="values" class="chartdiv"></ma-serial-chart>
</div>
<style>
.chartwrapper {
  width: 90%;
  position: relative;
  padding-bottom: 40%;
  box-sizing: border-box;
}

.chartdiv {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 5%;
}</style>

If it works great, if not, apologies for wasting your time.

[sbaik]

@mattfox Thank you for sharing that code.
As of this project, I don't think it would be cost effective for me to learn and redo all the pages just for the drag to zoom function on a chart.