1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Last data point not visible using crosshair until zoomed in

Last data point not visible using crosshair until zoomed in

I have been using Chart controls for years and I have always had a problem where in most cases the last data point in a line graph does not show on the graph when the vertical crosshair is moved to the far right. If I use the mouse wheel to zoom one "click" it then shows the last data point. See attached screen shots. The first one is the chart after initial creation. The second one is the same chart after a slight zoom.

Is there a way to force the full data set to be visible via the vertical crosshair initially without zooming in?


Attachment: syncfusionchart_ce2b2265.zip


2 Replies
TM Travis Miller April 22, 2022 02:45 PM UTC

Here is the JS I am using to create the graph:


function sfCreateDashboardGraph(data, font, line, lheight) {
    var h = 0;
    var elem = document.getElementById('dashboard-graph');
    if (elem !== null) {
        h = elem.clientHeight;
    }
    sfDashboardChart = new ej.charts.Chart({
        primaryXAxis: {
            valueType: 'DateTime',
            interval: 12,
            intervalType: 'Hours',
            labelFormat: 'M/d h:mm a',
            majorGridLines: { width: 1 },
            minorGridLines: { width: 1 },
            minorTicksPerInterval: 1,
            zoomFactor: 1, zoomPosition: 0.0,
            crosshairTooltip: { enable: true },
            labelStyle: {
                color: '#FFFFFF',
                size: font
            }
        },
        chartArea: {
            border: { width: 0 },
            background: 'rgba(255,255,255,255)'
        },
        background: 'rgba(0,0,0,0)',
        axes: [
            {
                rowIndex: 0,
                name: 'yPrimary',
                minimum: 0,
                maximum: 35,
                interval: 5,
                labelFormat: '{value} ft',
                lineStyle: { width: 0 },
                majorTickLines: { width: 0 },
                minorTickLines: { width: 0 },
                title: 'Water Level (ft)',
                //Axis title text style
                titleStyle: {
                    color: '#FFFFFF',
                    fontFamily: 'Segoe UI', fontWeight: 'bold',
                    size: font
                },
                labelStyle: {
                    color: '#FFFFFF',
                    size: font
                }
            }
        ],
        //Initializing Chart Series
        series: [
            {
                type: 'Line',
                dataSource: data.tank1.points,
                xName: 'time', width: line, marker: {
                    visible: false,
                    width: 0,
                    height: 0
                },
                yName: 'value', name: data.tank1.name,
                yAxisName: 'yPrimary',
                legendShape: 'Rectangle'
            },
            {
                type: 'Line',
                dataSource: data.tank2.points,
                xName: 'time', width: line, marker: {
                    visible: false,
                    width: 0,
                    height: 0
                },
                yName: 'value', name: data.tank2.name,
                yAxisName: 'yPrimary',
                legendShape: 'Rectangle'
            },
            {
                type: 'Line',
                dataSource: data.tank3.points,
                xName: 'time', width: line, marker: {
                    visible: false,
                    width: 0,
                    height: 0
                },
                yName: 'value', name: data.tank3.name,
                yAxisName: 'yPrimary',
                legendShape: 'Rectangle'
            },
            {
                type: 'Line',
                dataSource: data.tank4.points,
                xName: 'time', width: line, marker: {
                    visible: false,
                    width: 0,
                    height: 0
                },
                yName: 'value', name: data.tank4.name,
                yAxisName: 'yPrimary',
                legendShape: 'Rectangle'
            },
            {
                type: 'Line',
                dataSource: data.tank5.points,
                xName: 'time', width: line, marker: {
                    visible: false,
                    width: 0,
                    height: 0
                },
                yName: 'value', name: data.tank5.name,
                yAxisName: 'yPrimary',
                legendShape: 'Rectangle'
            }
        ],
        legendSettings: {
            visible: true,
            toggleVisibility: false,
            textStyle: {
                color: '#FFFFFF',
                size: font
            },
            height: lheight, padding: 5, shapePadding: 4, shapeWidth: 10,
            margin: { top: 0, left: 0, right: 0, bottom: 0 }
        },
        zoomSettings:
        {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true,
            enablePan: true,
            mode: 'X',
            toolbarItems: []
        },
        // Set line/area colors
        palettes: ["#AB0101", "#002EFE", "#1FFE00", "#FE1800", "#FE00E3", "#FE9E00"],
        //Initializing User Interaction Tooltip
        tooltip: {
            enable: true, shared: true,textStyle: { size: font }
        },
        crosshair: { enable: true, lineType: 'Vertical' },
        width: '100%',
        height: '100%'
    });
    sfDashboardChart.appendTo('#dashboard-graph');
    sfDashboardChart.refresh();
}





DG Durga Gopalakrishnan Syncfusion Team April 25, 2022 02:14 PM UTC

Hi Travis,


We have ensured your reported scenario with attached screenshots. The tooltip value displayed for last point using crosshair tooltip and after zoom in and zoom out is same. We have used 500 data points for each series. We have attached tested sample and video for your reference.


Sample : https://stackblitz.com/edit/6veynq


Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CrosshairTooltip1245848109.zip


We also request you to share the following information which will be more helpful for further analysis.

  • Try to reproduce the reported scenario in shared sample.
  • Please share your sample (or) code snippet with full configurations.
  • Share the details if you have done any other customization in your sample.
  • Share your datasource file.
  • Share your package version.


Please let us know if you have any concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Up arrow icon