[BUG] XY Chart Candlestick

Can someone tell me if it is possible to make a chart like this in the XY Chart Tool in Perspective? I tried to make a candlestick with the with each series running from the zone to zone but that does not appear to work?

http://software.es.net/react-timeseries-charts/#/example/trend

I tried creating each swipe as candlestick but that does not seem to work. Any help or pointers to read up more on the xy chart and options would be helpful.

what is not working? what do you see?

I get no bars.

[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "Sample",
          "label": {
            "enabled": true,
            "text": "Time",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "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
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "Value",
          "label": {
            "enabled": true,
            "text": "Random\n",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "minute",
              "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/yyyy 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
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "Value",
          "label": {
            "text": "RandomData"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "Sample",
            "y": "Value"
          },
          "xAxis": "Sample",
          "yAxis": "Value",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "candlestick",
          "candlestick": {
            "open": {
              "x": "Sample",
              "y": "Value"
            },
            "high": {
              "x": "Sample",
              "y": "Zone3UL"
            },
            "low": {
              "x": "Sample",
              "y": "Zone3LL"
            },
            "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": false,
                  "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": "Value",
          "label": {
            "text": "RandomData"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "Sample",
            "y": "Value"
          },
          "xAxis": "Sample",
          "yAxis": "Value",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "step line",
          "candlestick": {
            "open": {
              "x": "Sample",
              "y": "Value"
            },
            "high": {
              "x": "Sample",
              "y": "Zone3UL"
            },
            "low": {
              "x": "Sample",
              "y": "Zone3LL"
            },
            "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": false,
                  "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": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "example": [
          {
            "Sample": "1",
            "Value": "47",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "2",
            "Value": "26",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "3",
            "Value": "1",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "4",
            "Value": "45",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "5",
            "Value": "17",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "6",
            "Value": "6",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "7",
            "Value": "1",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "8",
            "Value": "25",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "9",
            "Value": "5",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "10",
            "Value": "47",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "11",
            "Value": "35",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "12",
            "Value": "1",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "13",
            "Value": "41",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "14",
            "Value": "11",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "15",
            "Value": "20",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "16",
            "Value": "36",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "17",
            "Value": "29",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "18",
            "Value": "5",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "19",
            "Value": "7",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": "20",
            "Value": "42",
            "Zone3LL": "0",
            "Zone2LL": "7",
            "Zone1LL": "15",
            "Zone1UL": "35",
            "Zone2UL": "43",
            "Zone3UL": "50"
          },
          {
            "Sample": ""
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart_0"
    },
    "position": {
      "x": 12,
      "y": 53,
      "height": 657,
      "width": 773
    },
    "custom": {}
  }
]

Acutally i think the candle chart doesnt work yet. because candlesticks should have 4 props not 3 :
high open close low
yet ignition has just 3. very weird

Has anyone ever made a candlestick chart? @cmallonee pretty sure this is a bug

I went ahead and changed the title for you

I was able to get this working (after requesting some help form the Dev who implemented the chart). Here are the important pieces for setting up a “standard” candlestick chart:

Underlying data:

The object for each data entry will need to supply five pieces of data: date, high, low, open, close. Going forward in my example, we will use those five values as keys.
Screen Shot 2021-08-12 at 9.38.11 AM

Axes:

I have only one entry for xAxes and one entry for yAxes. My xAxes entry is named “dateAxis”, and my yAxes entry is named “valuation”.

Series:

With those aforementioned settings in place, the following configuration displayed a candlestick chart.

  • Note that series.data.y is set to close, and that there is no candlestick.close property. I have no idea why it was implemented this way, but I suspect it was because the underlying library probably requires a y value be supplied, and so in some way it made sense to default to that y value for the close. :man_shrugging:
    Screen Shot 2021-08-12 at 9.34.53 AM

Result:

Known issue:

We are aware of this issue reported recently in regard to the “low” value always appearing to be 0.

1 Like

Can the requirement for the x-axis be a date be changed to allow it to be categories? Can we improve the documentation? None of this explained in the documentation.

Thanks (sorry for the rant), I am normally a fan of most things Inductive Automation and Ignition.

1 Like

i agree this example should be in the docs too, as it only has 2 examples and this candlestick definitly needs one as its quite different^^

For posterity, I ended up incorporating Cody’s example into the user manual.

2 Likes