Crosshair-x won't display on line chart

Question

I am having an issue with a line chart on my site. Everything works fine about it except no matter what I try, I cannot get the crosshair-x value/scale to show up. http://gyazo.com/42a34d0fed9c2912bf7ed40eb0c55144 Both are set to "visible": true. My JSON code is as follows:

var myChart = {
                        "type": "line",
                        "background-color": "transparent",
                        "utc": true,
                        "title": {
                            "y": "0px",
                            "text": '@myClasses.STARTDATETIME.ToString("MM/d/yyyy (h:mm tt)")',
                            "background-color": "transparent",
                            "font-size": "16px",
                            "font-color": "#666",
                            "font-weight": "bold",
                            "letter-spacing": "0.1225em",
                            "height": "25px"
                        },
                        "plotarea": {
                            "margin":"10% 8% 14% 12%",
                            "background-color":"#666"
                        },
                        "legend": {
                            "visible": false,
                        },
                        "scale-x": {
                            "min-value": myEpoch,
                            "shadow": 0,
                            "step": @ViewBag.TotalTime,
                            "line-color": "#fff",
                            "tick": {
                                "line-color": "#f6f7f8"
                            },
                            "guide": {
                                "line-color": "#f6f7f8",
                                "visible": true
                            },
                            "item": {
                                "font-color": "#666"
                            },
                            "transform": {
                                "type": "date",
                                "all": "%D,%d %M<br />%h:%i %A",
                                "item": {
                                    "visible": false
                                }
                            },
                            "label": {
                                "visible": false,
                                "font-color": "#666"
                            },
                            "minor-ticks": 0
                        },
                        "scale-y": {
                            "values": "25:200:25",
                            "line-color": "#fff",
                            "shadow": 0,
                            "tick": {
                                "line-color": "#f6f7f8"
                            },
                            "guide": {
                                "visible": false
                            },
                            "item": {
                                "font-color": "#666"
                            },
                            "label": {
                                "text": "Heart Rate (BPM)",
                                "font-color": "#666"
                            },
                            "minor-ticks": 0,
                            "thousands-separator": ",",
                            "markers": [
                                {
                                    "type": "area",
                                    "range": [25, 60],
                                    "backgroundColor": "#585857",
                                    "alpha": 1
                                },
                                {
                                    "type": "area",
                                    "range": [60, 95],
                                    "backgroundColor": "#6FCBDC",
                                    "alpha": 1
                                },
                                {
                                    "type": "area",
                                    "range": [95, 130],
                                    "backgroundColor": "#8BC540",
                                    "alpha": 1
                                },
                                {
                                    "type": "area",
                                    "range": [130, 165],
                                    "backgroundColor": "#F38220",
                                    "alpha": 1
                                },
                                {
                                    "type": "area",
                                    "range": [165, 200],
                                    "backgroundColor": "#EB2026",
                                    "alpha": 1
                                }
                            ]
                        },
                        "tooltip": {
                            "font-color": "#666",                                        
                            "visible": false
                        },
                        "chart": {
                            "marginRight": 30,
                            "marginLeft": 70
                        },
                        "plot": {
                            "tooltip-text": "%t bpm: %v",
                            "shadow": 0,
                            "line-width": "3px",
                            "marker": {
                                "type": "circle",
                                "size": 2
                            },
                            "hover-marker": {
                                "type": "circle",
                                "size": 4,
                                "border-width": "1px"
                            }
                        },
                        "series": [
                            {
                                "values": [88,96,93,88,88,86,89,120,144,153,156,132,113,145,138,152,135,155,164,165,147,143,152,140,153,138,116,125,131,132,134,124,111,136,167,171,165,168,139,129,138,130,140,141],
                                "text": "",
                                "line-color": "#ffffff",
                                "marker": {
                                    "background-color": "#ffffff",
                                    "border-width": 1,
                                    "shadow": 0,
                                    "border-color": "#ffffff",
                                    "visible": true
                                },
                                "palette": 0
                            }
                        ],
                        "crosshair-x": {
                            "line-color": "#f6f7f8",
                            "value-label": {
                                "border-radius": "5px",
                                "border-width": "1px",
                                "border-color": "#f6f7f8",
                                "padding": "0px 10px 0px 5px",
                                "font-weight": "bold",
                                "font-color": "#fff",
                                "background-color": "#666",
                                "visible": true
                            },
                            "scale-label": {
                                "font-color": "#fff",
                                "background-color": "#666",
                                "border-radius": "5px",
                                "border-width": "1px",
                                "border-color": "#f6f7f8",
                                "padding": "0px 10px 0px 5px",
                                "visible": true
                            }
                        }
                    };

Is there anything obvious that I'm missing that may be overruling those being set to visible?

Thanks in advance for your help!

Answer 1

Which version of ZingChart are you using? Does this occur in all browsers? Are you getting any console errors? I've taken your code and put it into our demo tool, and the crosshair seems to work. Take a look here.

You can try adding the following to the <head> element of your application:

<style title="zingchart"></style> 

This forces ZingChart to inject its CSS into that element, preventing certain types of conflicts that can occur from time to time, but I'm not 100% sure that this is the issue.

I'm on the ZingChart support team, so I'd love to help, but I can't reproduce the issue on my end.