XY Chart Bullets Don't Line up When yAxis is set to Date

Ignition
1

I am using Ignition 8.1.38 building a project in perspective. I have a few different XY charts that are working as expected in this project, but in one I am trying to display the date on the x-axis and the duration of a changeover in the y-axis. The data is coming in as a dataset from an SQL query. All of that is working fine. The issue I have is when I set the property for yAxes.0.render to date, the line somehow becomes misaligned with the date, and more importantly with the bullets. Setting that back to value brings everything back in line, but then the y-axis displays values like 4,000,000 through 14,000,000 rather than 00:40:00 through 01:40:00, which is useless to us. Below is the code for the chart that is built in with the example data modified to show the behavior. I attempted to upload a screenshot, but the page kept crashing while uploading.

[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Time",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "E MMM d yyyy",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "process temp",
          "label": {
            "enabled": true,
            "text": "Process Temp",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "HH:mm:ss",
            "format": "HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        },
        {
          "name": "output temp",
          "label": {
            "enabled": true,
            "text": "Output Temp",
            "color": ""
          },
          "visible": true,
          "inversed": false,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "HH:mm:ss",
            "format": "HH:mm:ss"
          },
          "value": {
            "range": {
              "min": "",
              "max": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": true,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "4,4",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "process temp",
          "label": {
            "text": "Process Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "t_stamp",
            "y": "process_temp"
          },
          "xAxis": "time",
          "yAxis": "process temp",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "line",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        },
        {
          "name": "output temp",
          "label": {
            "text": "Output Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "t_stamp",
            "y": "output_temp"
          },
          "xAxis": "time",
          "yAxis": "output temp",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "line",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "example": [
          {
            "t_stamp": "Tue Aug 07 2018",
            "process_temp": "1:15:18:063",
            "output_temp": "00:54:53:160"
          },
          {
            "t_stamp": "Tue Aug 08 2018",
            "process_temp": "1:36:40:530",
            "output_temp": "00:59:48:017"
          },
          {
            "t_stamp": "Tue Aug 09 2018",
            "process_temp": "1:05:36:030",
            "output_temp": "00:42:09:547"
          },
          {
            "t_stamp": "Tue Aug 10 2018",
            "process_temp": "1:02:55:540",
            "output_temp": "1:08:00:767"
          },
          {
            "t_stamp": "Tue Aug 11 2018",
            "process_temp": "1:15:14:327",
            "output_temp": "00:46:07:537"
          },
          {
            "t_stamp": "Tue Aug 12 2018",
            "process_temp": "1:26:56:063",
            "output_temp": "00:51:52:523"
          },
          {
            "t_stamp": "Tue Aug 13 2018",
            "process_temp": "00:47:45:007",
            "output_temp": "00:47:36:000"
          },
          {
            "t_stamp": "Tue Aug 14 2018",
            "process_temp": "1:10:12:093",
            "output_temp": "00:47:07:327"
          },
          {
            "t_stamp": "Tue Aug 15 2018",
            "process_temp": "1:09:08:560",
            "output_temp": "00:59:33:580"
          },
          {
            "t_stamp": "Tue Aug 16 2018",
            "process_temp": "00:42:57:997",
            "output_temp": "1:02:12:167"
          },
          {
            "t_stamp": "Tue Aug 17 2018",
            "process_temp": "1:04:18:027",
            "output_temp": "1:13:39:333"
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart_0"
    },
    "position": {
      "x": 43,
      "y": 26,
      "width": 786,
      "height": 575
    },
    "custom": {}
  }
]
2

This is how your chart shows up when I paste your JSON.

XY time time chart
XY time time chart1145×515 91 KB

Comments:

  • Your SQL is returning a string for the t_stamp. You should be returning a datetime object - millisecond timestamp for Ignition.
  • If you set
    xAxes.0.date.format : yyyy/MMM/d
    you'll see that the t_stamp string is being converted to a timestamp of 0 which is 1970-01-01 00:00:00 (which is the UNIX epoch).
3

XYChartOffset
XYChartOffset1070×471 47.3 KB

Here is the actual chart that I am displaying (don't know why I couldn't upload it earlier). In my actual query, the dates are returned as datetime objects, and display just fine. The issue I have is that the bullets are in the correct positions, but the line is not. You can see it in the JSON that I uploaded as well, it just isn't as obvious on the image above. When I change yAxes.0.render to values, the lines look like they should, but changing it to date is causing the issue. The data is coming in in the form of 01:15:18:063 so I set yAxes.0.date.inputFormat and yAxes.0.date.format to HH:mm:ss:S.

4

That's still a string.

Copy and paste the dataSources JSON into another post. (If there's a binding then we won't see the data because we don't have the database, etc.)

5

You can ignore the Goal object in here, it isn't used. DTReasons is the dataset I am using. production_day, start_time, and duration are all returned as DATETIME. name is the only thing being returned as a string.

It is worth mentioning that the column for duration is originally a datatype float for seconds. I am using CONVERT(TIME, DATEADD(ms, duration * 1000, 0)) to convert that into h:mm:ss.S. In MSSQL Studio, this returns hh:mm:ss.S, but Ignition is returning yyyy/M/d hh:mm:ss.

I guess what is still confusing me is why the bullets render in the correct position, and don't change position regardless of whether date or value is selected, but the line is not rendering as expected when date is selected. The y-axis labels change to reflect the render option chosen, and they display correctly as well.

{
  "Goal": [
    {
      "full": "1:00:00",
      "target": "1:00:00",
      "t_stamp": "value"
    },
    {
      "full": "1:00:00",
      "target": "1:00:00",
      "t_stamp": "value"
    }
  ],
  "DTReasons": {
    "$": [
      "ds",
      192,
      1725560422039
    ],
    "$columns": [
      {
        "name": "production_day",
        "type": "Date",
        "data": [
          1722920400000,
          1723006800000,
          1723093200000,
          1723093200000,
          1723179600000,
          1723438800000,
          1723525200000,
          1723611600000,
          1723611600000,
          1723784400000,
          1723784400000,
          1724130000000,
          1724130000000,
          1724216400000,
          1724216400000,
          1724216400000,
          1724302800000,
          1724389200000,
          1724389200000,
          1724389200000,
          1724475600000,
          1724648400000,
          1724821200000,
          1724821200000,
          1724907600000,
          1724907600000,
          1724907600000,
          1724994000000,
          1724994000000,
          1725339600000,
          1725426000000
        ]
      },
      {
        "name": "name",
        "type": "String",
        "data": [
          "Job 1",
          "Job 2",
          "Job 3",
          "Job 4",
          "Job 5",
          "Job 6",
          "Job 7",
          "Job 8",
          "Job 9",
          "Job 10",
          "Job 11",
          "Job 12",
          "Job 13",
          "Job 14",
          "Job 15",
          "Job 16",
          "Job 17",
          "Job 18",
          "Job 19",
          "Job 20",
          "Job 21",
          "Job 22",
          "Job 23",
          "Job 24",
          "Job 25",
          "Job 26",
          "Job 27",
          "Job 28",
          "Job 29",
          "Job 30",
          "Job 31"
        ]
      },
      {
        "name": "start_time",
        "type": "Date",
        "data": [
          1722980981953,
          1723050000000,
          1723136400000,
          1723165200000,
          1723253528110,
          1723529295240,
          1723623370330,
          1723671912360,
          1723691242967,
          1723851980667,
          1723881467833,
          1724181789267,
          1724234628793,
          1724276625433,
          1724288659487,
          1724306740577,
          1724370719233,
          1724450043477,
          1724464207247,
          1724486706840,
          1724552528520,
          1724703112957,
          1724881231740,
          1724908837027,
          1724973432433,
          1725002739633,
          1725032685677,
          1725054458863,
          1725082437087,
          1725434575450,
          1725505493423
        ]
      },
      {
        "name": "duration",
        "type": "Date",
        "data": [
          -2208962397997,
          -2208964425183,
          -2208962422390,
          -2208962352580,
          -2208962593953,
          -2208964104953,
          -2208964570330,
          -2208962340990,
          -2208963579977,
          -2208962780667,
          -2208963467833,
          -2208963626420,
          -2208964372673,
          -2208964344000,
          -2208964087477,
          -2208964432463,
          -2208963119233,
          -2208964670453,
          -2208963611983,
          -2208963906840,
          -2208963341973,
          -2208964622003,
          -2208963051440,
          -2208962987907,
          -2208964334993,
          -2208961983937,
          -2208962685673,
          -2208963424460,
          -2208963263970,
          -2208961399470,
          -2208962681937
        ]
      },
      {
        "name": "durationString",
        "type": "String",
        "data": [
          "01:20:02:003",
          "00:46:14:817",
          "01:19:37:610",
          "01:20:47:420",
          "01:16:46:047",
          "00:51:35:047",
          "00:43:49:670",
          "01:20:59:010",
          "01:00:20:023",
          "01:13:39:333",
          "01:02:12:167",
          "00:59:33:580",
          "00:47:07:327",
          "00:47:36:000",
          "00:51:52:523",
          "00:46:07:537",
          "01:08:00:767",
          "00:42:09:547",
          "00:59:48:017",
          "00:54:53:160",
          "01:04:18:027",
          "00:42:57:997",
          "01:09:08:560",
          "01:10:12:093",
          "00:47:45:007",
          "01:26:56:063",
          "01:15:14:327",
          "01:02:55:540",
          "01:05:36:030",
          "01:36:40:530",
          "01:15:18:063"
        ]
      }
    ]
  }
}

And here is the JSON for the actual chart that I have setup.

[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "production_day",
          "label": {
            "enabled": true,
            "text": "Date",
            "color": ""
          },
          "inversed": false,
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 270,
              "verticalCenter": "bottom",
              "horizontalCenter": "right"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 15,
              "position": 0.5
            },
            "font": {
              "size": 12,
              "weight": 500
            }
          },
          "align": "value",
          "dx": 10
        }
      ],
      "yAxes": [
        {
          "name": "duration",
          "label": {
            "enabled": true,
            "text": "Total Duration",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy/d/M HH:mm:ss",
            "format": "HH:mm:ss.S"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "DTReasons",
          "label": {
            "text": "Die Change Times"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "DTReasons",
            "x": "production_day",
            "y": "duration"
          },
          "xAxis": "production_day",
          "yAxis": "duration",
          "zIndex": 1,
          "tooltip": {
            "enabled": true,
            "text": "{name}[/]\n{duration}[/]\n{production_day}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "line",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": 0,
              "y": 0
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 0,
                  "height": 0,
                  "label": {
                    "text": "",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}[/]\n{durationString}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "Goal": [
          {
            "full": "1:00:00",
            "target": "1:00:00"
          },
          {
            "full": "1:00:00",
            "target": "1:00:00"
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart"
    },
    "position": {
      "height": 500,
      "width": 1080
    },
    "custom": {},
    "propConfig": {
      "props.dataSources.DTReasons": {
        "binding": {
          "type": "query",
          "config": {
            "queryPath": "DieChangeHistory",
            "parameters": {
              "machineID": "'3'",
              "endDate": "'2024-09-05 23:00:00'",
              "startDate": "'2024-08-05 23:00:00'"
            }
          }
        }
      },
      "props.dataSources.Goal[0].t_stamp": {
        "binding": {
          "config": {
            "path": "view.params.startDate"
          },
          "type": "property"
        }
      },
      "props.dataSources.Goal[1].t_stamp": {
        "binding": {
          "config": {
            "path": "view.params.endDate"
          },
          "type": "property"
        }
      }
    }
  }
]
6

A bit of an update. I made a mistake in my previous posts in thinking the line was not rendering properly. I forgot that I put a dx in xAxes.0 that offset my labels. Removing that renders the line and dates appropriately. It seems that the bullets are the things that are not aligned properly.

I have two columns returned that correlate duration with a time. production_day is a datatype of DATE, but casting as DATETIME does not change anything. start_time is a datatype of DATETIME. The big difference between the two is that production_day returns the date with a time of 00:00:00 (2024-08-09 00:00:00) while start_time returns the actual time the changeover is started (2024-08-09 20:32:08). Neither of these is a string.

While I use production_day for the X-axis, there are duplicate time stamps in the list, but the durations just become vertical lines for those cases, like I would expect it to. The offset between line and bullet points looks very consistent across all data points whether I display 5 or 30. The bullets always lead the line by half a unit.

When I change my X-axis to start_time, the bullets appear to line up perfectly, but only when I have a larger number of data points. 30 data points looks great, but 5 data points makes the offset very apparent. and the distances from the line are not a consistent distance.I can have a bullet point lead the line by 2 or 3 pixels, and then the next bullet point is lagging the line by 10 or more pixels. Vertically, they are correct, but horizontally they vary.

I have also verified that duration is being returned in DATETIME format, and that my series.0.data.y is set to duration and not durationString, which is being used for the labels on the bullet points.