Evaluating product- help with chart setting- crashes browser

[GofgO]

Hello, we are in the process of evaluating your product. And i believe we will go with you 100%. I am honestly very very very happy with the speed of chart rendering. Great job guys.

I have an issue i cant work out…
It seems that chart freezes / gets in some kind of loop if THESE are its settings:

var chart = new CanvasJS.Chart("chartContainer", {
  data: [
      {
    "dataPoints": [
        {
            "y": 8750.65,
            "label": "Total",
            "x": 0
        }
    ],
    "name": "Order_Amount_collected",
    "legendText": "Order_Amount_collected",
    "toolTipContent": "Total - Order_Amount_collected: {y}",
    "showInLegend": true,
    "type": "column",
    "color": "#A6CEE3"
}
      ],
    "axisX": [
        {
            "title": "",
            "margin": 2,
            "maximum": null,
            "minimum": null,
            "interval": null,
            "reversed": false,
            "crosshair": {
                "color": "black",
                "label": "",
                "enabled": true,
                "lineDashType": "dash",
                "labelFontSize": 12,
                "labelFontColor": "white",
                "labelFontStyle": "normal",
                "labelFontWeight": "normal",
                "snapToDataPoint": false,
                "labelBackgroundColor": "grey"
            },
            "lineColor": "#BBBBBB",
            "tickColor": "#BBBBBB",
            "titleWrap": true,
            "labelAngle": 0,
            "stripLines": [],
            "tickLength": 5,
            "gridDashType": "solid",
            "lineDashType": "solid",
            "gridThickness": 0,
            "labelFontSize": 16,
            "lineThickness": 2,
            "tickPlacement": "outside",
            "tickThickness": 2,
            "titleFontSize": 25,
            "labelFontColor": "#808080",
            "labelFontStyle": "normal",
            "labelPlacement": "outside",
            "labelTextAlign": "left",
            "titleFontColor": "#666666",
            "titleFontStyle": "normal",
            "labelFontFamily": "Calibri, Optima, Candara, Verdana, Geneva, sans-serif",
            "labelFontWeight": "normal",
            "titleFontWeight": "normal",
            "labelBackgroundColor": "transparent"
        }
    ],
    "axisY": [
        {
            "title": "",
            "margin": 2,
            "maximum": null,
            "minimum": null,
            "interval": null,
            "reversed": false,
            "crosshair": {
                "color": "#808080",
                "label": "",
                "enabled": true,
                "lineDashType": "solid",
                "labelFontSize": 16,
                "labelFontColor": "white",
                "labelFontStyle": "normal",
                "labelFontWeight": "normal",
                "snapToDataPoint": true,
                "labelBackgroundColor": "#808080"
            },
            "gridColor": "#BBBBBB",
            "lineColor": "#BBBBBB",
            "tickColor": "#BBBBBB",
            "titleWrap": true,
            "labelAngle": 0,
            "stripLines": [],
            "tickLength": 5,
            "includeZero": true,
            "gridDashType": "solid",
            "labelAutoFit": true,
            "lineDashType": "solid",
            "gridThickness": 2,
            "labelFontSize": 16,
            "lineThickness": 2,
            "tickPlacement": "outside",
            "tickThickness": 2,
            "titleFontSize": 25,
            "labelFontColor": "#808080",
            "labelFontStyle": "normal",
            "labelPlacement": "outside",
            "labelTextAlign": "left",
            "titleFontColor": "#666666",
            "titleFontStyle": "normal",
            "interlacedColor": null,
            "labelFontFamily": "Calibri, Optima, Candara, Verdana, Geneva, sans-serif",
            "labelFontWeight": "normal",
            "titleFontWeight": "normal",
            "labelBackgroundColor": "transparent"
        }
    ],
    "theme": "light1",
    "title": {
        "text": null,
        "margin": 10,
        "padding": 10,
        "visible": false,
        "fontSize": 16,
        "fontColor": "#3A3A3A",
        "fontStyle": "normal",
        "fontFamily": "Calibri, Optima, Candara, Verdana, Geneva, sans-serif",
        "fontWeight": "bold",
        "borderColor": "#000000",
        "cornerRadius": 0,
        "verticalAlign": "top",
        "backgroundColor": null,
        "borderThickness": 0,
        "horizontalAlign": "center"
    },
    "height": 400,
    "legend": {
        "cursor": "pointer",
        "reversed": false,
        "fontFamily": "Calibri, Optima, Candara, Verdana, Geneva, sans-serif",
        "verticalAlign": "top",
        "horizontalAlign": "center",
        "dockInsidePlotArea": false
    },
    "culture": "en",
    "toolTip": {
        "shared": false,
        "enabled": true,
        "fontSize": 14,
        "reversed": false,
        "fontColor": "#000000",
        "fontStyle": "italic",
        "fontFamily": "Calibri, Arial, Georgia, serif",
        "fontWeight": "normal",
        "cornerRadius": 5,
        "backgroundColor": "#FFFFFF",
        "borderThickness": 2,
        "animationEnabled": true
    },
    "toolbar": {
        "fontColor": "#000000",
        "fontColorOnHover": "#ffffff",
        "buttonBorderColor": "#3e3e3e",
        "itemBackgroundColor": "#d3d3d3",
        "buttonBorderThickness": 1,
        "itemBackgroundColorOnHover": "#3e3e3e"
    },
    "zoomType": "x",
    "creditHref": "https://app.graphite-note.com/",
    "creditText": "graphite-note",
    "zoomEnabled": true,
    "exportEnabled": false,
    "exportFileName": "ChartExport",
    "animationEnabled": true,
    "animationDuration": 1200,
    "showLegendsGlobal": true,
    "interactivityEnabled": true,
    "showSeriesLabelGlobal": false,
	
});

chart.render();

If i remove all settings and leave only data, everything works, but i cant find the possible reason why does chart goes crazy on hover on the Column.

Thank

[GofgO]

You can close the question, i figured out that if i remove ‘interval‘ under axis X arr object that i don’t have that issue anymore.

I suppose I shouldn’t apply null values in chart options :D

[Adithya Menon]

@gofgo,

Glad that you figured it out. Labels are shown at every interval of the axis. The interval property sets the distance between these labels. The interval property is automatically calculated, however, if you are setting it manually, you can provide a numerical value or combine it with intervalType property in case of date-time axis.

—
Adithya Menon
Team CanvasJS