scrollablePlotArea not rendering lines but markers show on areas beyond width highcharts-vue v1.3.5 highcharts 8.1.1

[CLMokbel]

I have logic that is set to display data along a plot area, but I do also have logic that sets this plotarea to scroll when it hits a certain width, code:

return {             
            chartOptions: {
                credits: {
                    enabled: false
                },
                chart: {
                    spacingLeft: 0,                   
                    spacingTop: 0,
                    backgroundColor: "transparent",
                    className: 'highcharts',
                    style: {
                        fontFamily: '"Open Sans",sans-serif'
                    },
                    type: 'spline',
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false,
                    height: this.height,
                    marginLeft: 40,
                    marginBottom: 120,
                    marginTop: 40
                    },
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 700
                            },
                            chartOptions: {
                                chart: {
                                    height: 450,
                                    scrollablePlotArea: {
                                        minWidth: 700,
                                        scrollPositionX: 0
                                    }
                                }
                            }
                        },
                            {
                                condition: {
                                    minWidth: 700
                                },
                                chartOptions: {
                                    chart: {
                                        height: 650
                                    }
                                }
                            }]
                    },
                exporting: {
                    enabled: false // hide button
                },

                title: {
                    text: ''
                },

                subtitle: {
                    text: ''
                },

                xAxis: {
                    tickInterval: 200,
                   // reversed: true
                     labels: {
                        enabled: false
                    },
                    plotLines: (resultsDataNew.intendedOccupancy == 'Homestead') ?[{
                        color: '#808080', // Color value
                        dashStyle: 'solid', // Style of the plot line. Default to solid
                        value: 1300, // Value of where the line will appear
                        width: 1, // Width of the line,
                        label: {
                            text: 'AIO HELOC draw access terminates',
                            verticalAlign: 'middle',
                            textAlign: 'center',
                            style: {
                                color: 'red',
                                fontSize: 9,
                                fontWeight: 'bold'
                            }
                    }
                    }] : [{
                        color: '#808080', // Color value
                        dashStyle: 'solid', // Style of the plot line. Default to solid
                        value: 1300, // Value of where the line will appear
                            width: 0 // Width of the line    
                        }]
                },

                yAxis: {
                    title: {
                        text: ''

                    },
                    tickAmount: 6,
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                     formatter: function () {
                        return '<b>Week - </b>'+ this.points.reduce(function (s, point) {
                return s + '<br/>' + point.series.name + ': ' +
                    currency(point.y).format() ;
            }, '<b>' + this.x + '</b>');
        },
                    shared: true,

                },
                series: [{
                    name: 'All In One Loan Credit Limit',
                    data: this.DataZ[0].value,
                    marker: {
                        symbol: 'square',
                    }
                }, {
                        name: 'All In One Loan Principal Balance',
                        data: this.DataX[0].value,
                        marker: {
                            symbol: 'square',
                        }
                }, {
                        name: 'Traditional Mortgage Principal Balance',
                        data: this.DataY[0].value,
                        showInLegend: this.DataY[0].value !== undefined,
                        marker: {
                            symbol: 'square',
                        }
                }],
                legend: {
                    layout: 'vertical',
                    align: 'center',
                    verticalAlign: 'bottom',
                    floating: false,

                },

            }

        };
    }

Visualization:

Should I be re rendering the graphs on scroll? When I click my axis labels on the key below the graph and bring them back up they render completely, but for whatever reason when I first bring up the graph in the modal it only shows the plotlines that are in view...

I've tried setting the scrollPosition to 1 but the desired effect is to have the the scrollable start at the beginning of the graph not the end.

I should note that this issue is only occurring on mobile and tablet where the width of the graph is scrollable. on desktop the graph renders fine because it is not scrolling.

starting from desktop view and then inspecting the page and going to responsive, when i scale the page down the graph is showing as expected within the scroll, so it must have something to do with the render outside of width? I have my container set to 75% and the width of the template for the chart set to 100%.

the template, and data are defined as such

<template>
    <div class="chart-container" style="position: relative; width:auto; height:auto" >
        <div class="chart-wrapper">
            <div class="chart">
                <highcharts ref="highcharts" :options="chartOptions"></highcharts>

            </div>

        </div>
    </div>
</template>

<script>
  import {Chart} from "highcharts-vue";
  import currency from "currency.js";
  import Highcharts from "highcharts";
  import exportingInit from "highcharts/modules/exporting";
  import stockInit from "highcharts/modules/stock";
  import offlineExporting from "highcharts/modules/offline-exporting";
  import accessibility from "highcharts/modules/accessibility";

  stockInit(Highcharts);
  exportingInit(Highcharts);
  offlineExporting(Highcharts);
  accessibility(Highcharts);

  export default {
    name: "ExpandedPaydown",
    components: {
      highcharts: Chart,
    },
        props: {   
            Weeks: {
                type: Array,
                default: () => [],
            },
      DataX: {
        type: Array,
        default: () => [],
      },
      DataY: {
        type: Array,
        default: () => [],
        },
        DataZ: {
            type: Array,
            default: () => [],
            },
            height: {
                type: Number,
                default: 350
            },
            expandGraph: {
                type: Boolean,
                default: false,
            }
    },

and styles are defined,

<style lang="scss" scoped>
    @import "../../../styles/core/mixins.scss";
    .chart-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

    }

    .chart-wrapper {
        background-color: transparent;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        z-index: 0;

        @include media(xxl) {
            flex-direction: column;
            align-items: center;
        }

        @include media(md) {
            flex-direction: row;
        }

        @include media(sm) {
            flex-direction: column;
            align-items: center;
        }
    }

    .chart {
        margin: 0;
        font-size: 1rem;
        text-align: center;
        z-index: 0;
        border: 1px solid grey;
        padding: 20px;
        width: 100%;
        height: auto;

        @include media(md) {
            max-width:100%;
        }

        @include media(sm) {
            border: 0px;
            max-width: 100%;
        }
    }

</style>

[jszuminski]

Thanks for reporting @CLMokbel!

It would be very helpful if you could reproduce this issue in an online code editor like CodeSandbox or CodePen.

Then I'll gladly take a look, investigate this further, and decide whether this bug should be in the highcharts-vue or highcharts backlog.

Thanks in advance!

[CLMokbel]

Thank you I will work on recreating the issue as soon as possible.

[CLMokbel]

Thank you for being patient with me, I will try to get this to you today.

[CLMokbel]

I apologize but recreating this environment in a codepen is proving to be rather difficult. I've added in the dependencies but for whatever reason the :options="chartOptions" prop is throwing an error in the environment although i've added highcharts-vue as a dependency.

[jszuminski]

@CLMokbel no worries, you can start from here: https://codesandbox.io/s/silly-bhaskara-k64zry

As you can see in the demo, the :options="chartOptions" seem to work as expected so you should not encounter any environment-related problems.

[CLMokbel]

https://codesandbox.io/s/solitary-leaf-w4729p?file=/src/main.js I was able to transfer over some data but the app isn't rendering. it's vue 2. I apologize I wish I was more adept with using codepen.

[jszuminski]

I see that something's not working there. If you're using Vue2, you can start from here: https://codesandbox.io/s/pedantic-darkness-vkhfpm

I've already added the necessary modules for you and created a Graph.vue component based on what you added.

[CLMokbel]

https://codesandbox.io/s/brave-faraday-dvq6m6?file=/src/Graph.vue interestingly enough.. it seems to be working in the codepen... Perhaps the problem is related to the overall style settings of the application as a whole... hmn..