is there an example of a canvasJS graph where each point on a graph has a tick and label on the X axis?

Question

I cannot seem to find an example where every single point in a set of data had its own tick and label on a graph. when I load in my data, CanvasJS gives me intervals as my x axis. the actual points are placed inbetween these intervals. If i add more data, the intervals dont change. I am looking for an example of how to make it so each point is represented.

I would also like the xaxis to look as identical to this formatting as possible

I have read some documentation here but I am struggling to make it work for me. My X axis values look like this: 119604384477647324 but are in Miliseconds.

any help would be appreciated. I have a presentation soon and I am hard stuck. thank you!

Answer 1

Canvas.js offers a wide range of charts that can be used with a variety of ways to customize them. One key thing to keep in mind is to ensure that your data array dataPoint is in the correct format and contains all corresponding elements.

I believe what you are trying to do can be done through utilizing valueFormatString variable, kindly find below a similar example that creates an area chart when working with timestamp data (stored as Unix Timestamp in milliseconds).

                            function timeConverter(timestamp) {
                              const date = new Date(timestamp);
                              const year = date.getFullYear();
                              const month = ("0" + (date.getMonth() + 1)).slice(-2);
                              const day = ("0" + date.getDate()).slice(-2);
                              const hours = ("0" + date.getHours()).slice(-2);
                              const minutes = ("0" + date.getMinutes()).slice(-2);
                              const seconds = ("0" + date.getSeconds()).slice(-2);
                              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                            }

                                    var chart = new CanvasJS.Chart("download_overtime_day", {
                                    animationEnabled: true, 
                                    toolTip:{   
                                            contentFormatter: function (e) {
                                            var content = timeConverter(e.entries[0].dataPoint.x) + " : " + e.entries[0].dataPoint.y + " Template Downloaded";
                                            return content;
                                        }      
                                    }, 
                                    zoomEnabled: true, 
                                    title:{
                                        text: "Daily View (Past 24 Hours)"
                                    },
                                    theme: "light2",
                                    exportFileName: "Daily View (Past 24 Hours) - 2023-04-26 01:52:45",
                                    exportEnabled: true,
                                    backgroundColor: "",
                                    axisX: {
                                        title: "Hour of The Day",
                                        valueFormatString: "HH:mm:ss",
                                        labelAngle: -30
                                    },
                                    axisY: {
                                        title: "Downloads",
                                        valueFormatString: "#0",
                                        suffix: " Tem..",
                                        maximum: 6
                                    },
                                    data: [{
                                        type: "area",
                                        xValueType: "dateTime",
                                        dataPoints: [{"x":1682460000000,"y":0,"markerSize":0},{"x":1682463600000,"y":0,"markerSize":0},{"x":1682467200000,"y":0,"markerSize":0},{"x":1682470800000,"y":0,"markerSize":0},{"x":1682474400000,"y":0,"markerSize":0},{"x":1682478000000,"y":0,"markerSize":0},{"x":1682481600000,"y":0,"markerSize":0},{"x":1682485200000,"y":0,"markerSize":0},{"x":1682488800000,"y":0,"markerSize":0},{"x":1682492400000,"y":0,"markerSize":0},{"x":1682496000000,"y":0,"markerSize":0},{"x":1682499600000,"y":0,"markerSize":0},{"x":1682502686000,"y":1,"markerSize":13,"indexLabel":"1","indexLabelFontSize":13},{"x":1682503200000,"y":0,"markerSize":0},{"x":1682506800000,"y":0,"markerSize":0},{"x":1682510400000,"y":0,"markerSize":0},{"x":1682514000000,"y":0,"markerSize":0},{"x":1682517086000,"y":1,"markerSize":13,"indexLabel":"1","indexLabelFontSize":13},{"x":1682517600000,"y":0,"markerSize":0},{"x":1682521200000,"y":0,"markerSize":0},{"x":1682524800000,"y":0,"markerSize":0},{"x":1682528400000,"y":0,"markerSize":0},{"x":1682532000000,"y":0,"markerSize":0},{"x":1682535600000,"y":0,"markerSize":0},{"x":1682539200000,"y":0,"markerSize":0},{"x":1682542800000,"y":0,"markerSize":0}]
                                    }]
                                });

                                chart.render();
                                

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="download_overtime_day" style="height:400px;width:100%"></div>

Also, many examples can be found on how to handle time series data in many ways such as storing the data in Date format as well (not limited to Unix Timestamp). Kindly find here.

Hope it helped :)!