{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-live-stock-data",
  "framework": "vue",
  "type": "registry:component",
  "component": "Chart",
  "variant": "live-stock-data",
  "dependencies": [
    "@syncfusion/ej2-vue-charts"
  ],
  "description": "Chart streams changing AAPL stock prices with a live-updating candle series.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/chart-live-stock-data.md"
  },
  "files": [
    {
      "target": "src/components/chart-live-stock-data/Chart.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div align='center'>\n        <ejs-chart ref=\"chart\" style='display:block' :load='load' :axisRangeCalculated='axisRangeCalculated' :pointRender='pointRender' align='center' id='stock' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'\n            :chartArea='chartArea' :width='width' :crosshair='crosshair'>\n            <e-series-collection>\n                <e-series :dataSource='seriesData1' type='Candle' :lastValueLabel='lastValueLabel' bearFillColor='#2ecd71' bullFillColor='#e74c3d' columnWidth=0.4\n                xName='x' low='low' high='high' open='open' close='close'> </e-series>\n            </e-series-collection>\n        </ejs-chart>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { Browser } from '@syncfusion/ej2-base';\nimport { ChartComponent, SeriesDirective, SeriesCollectionDirective, AnnotationDirective, AnnotationsDirective, CandleSeries, DateTime, Crosshair, ChartAnnotation, LastValueLabel } from \"@syncfusion/ej2-vue-charts\";\n\nlet value = 180;\nlet getData = () => {\n    let series = [];\n    let point;\n    for (let i = 0; i < 30; i++) {\n        value = 180 + ((Math.random() * 25) * Math.sin(i * Math.PI / 8)); // Adjust the function as needed\n        value = Math.max(140, Math.min(260, value));\n        if (value > 260) {\n            value = 260;\n        }\n        if (value < 140) {\n            value = 140;\n        }\n        value += Math.random() * 0.1;\n        let open = value + Math.round(Math.random() * 18);\n        let low = Math.min(value, open) - Math.round(Math.random() * 6);\n        let high = Math.min(220, Math.max(value, open) + Math.round(Math.random() * 15));\n        point = {\n            x: new Date(2000, 5, 2, 2, 0, i),\n            close: value,\n            open: open,\n            low: low,\n            high: high\n        };\n        series.push(point);\n    }\n    return { series: series };\n};\n\nlet data = getData().series;\nlet incVal = 0;\nlet updateVal = data.length;\nlet pointAdded = false;\n\nexport default {\n  components: {\n    'ejs-chart': ChartComponent,\n    'e-series-collection': SeriesCollectionDirective,\n    'e-series': SeriesDirective,\n    'e-annotations': AnnotationsDirective,\n    'e-annotation': AnnotationDirective\n  },\n  data: function() {\n    return {\n        seriesData1: data,\n        lastValueLabel: { enable: true, background: 'red', dashArray: '3,2', lineWidth: 0.5, font: {size: '10px'} },\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'DateTime', \n            interval: Browser.isDevice ? 8 : 4,\n            crosshairTooltip: { enable: true }, \n            edgeLabelPlacement: Browser.isDevice ? 'None' : 'Shift', \n            majorGridLines: { width: 0 },\n            labelIntersectAction: 'Hide'\n        },\n        //Initializing Primary Y Axis\n        primaryYAxis:\n        { \n            interval: 20, \n            opposedPosition: true, \n            minimum: 120,\n            crosshairTooltip: { enable: true }, \n            lineStyle: { width: 0 }, \n            majorGridLines: { width: 1 }, \n            majorTickLines: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            }\n        },\n        width : Browser.isDevice ? '100%' : '90%',\n        title: \"AAPL Historical\",\n        crosshair: { \n            enable: true, \n            dashArray: '5,5' \n        },\n    };\n  },\n  provide: {\n    chart: [CandleSeries, DateTime, Crosshair, ChartAnnotation, LastValueLabel]\n  },\n  methods: {\n      load: function (args) {\n          this.clearInterval();\n          this.intervalId = setInterval(() => {\n              var container = document.getElementById('stock');\n              if (container && container.id === args.chart.element.id) {\n                  let newData1 = [];\n                  let value = 180;\n                  pointAdded = true;\n                  for (let i = 0; i < args.chart.series[0].dataSource.length; i++) {\n                      newData1.push(Object.assign({}, args.chart.series[0].dataSource[i]));\n                  }\n                  if (newData1.length > 0) {\n                      let lastIndex = newData1.length - 1;\n                      let previousClose = newData1[lastIndex].close;\n                      newData1[lastIndex].close += (Math.random() < 0.5 ? 1 : -1) * Math.random() * 25;\n                      newData1[lastIndex].close = Math.min(Math.min(Math.max(newData1[lastIndex].close, newData1[lastIndex].low + 5), newData1[lastIndex].high - 5), newData1[lastIndex].open - 2);\n                      if (previousClose === newData1[lastIndex].close) {\n                          newData1[lastIndex].close -= 5;\n                      }\n                  }\n                  if (incVal < 10) {\n                      if (args.chart.series.length > 0) {\n                          args.chart.series[0].setData(newData1);\n                          incVal++;\n                      }\n                  }\n                  else {\n                      let change = (Math.random() < 0.49 ? 1 : -1) * Math.random() * 10;\n                      value += change;\n                      if (value > 260) {\n                          value = 260;\n                      }\n                      if (value < 140) {\n                          value = 140;\n                      }\n                      value += Math.random() * 0.1;\n                      let open = value + Math.round(Math.random() * 12);\n                      let low = Math.min(value, open) - Math.round(Math.random() * 8);\n                      let high = Math.max(value, open) + Math.round(Math.random() * 15);\n                      if (args.chart.series.length > 0) {\n                          var lastDataPointIndex = args.chart.series[0].dataSource.length - 1;\n                          if (lastDataPointIndex >= 0) {\n                              var timestamp = args.chart.series[0].dataSource[lastDataPointIndex].x;\n                              var lastTimestamp = new Date(timestamp).getTime();\n                              args.chart.series[0].addPoint({ x: new Date(lastTimestamp + 1000), high: high, low: low, open: open, close: value });\n                          }\n                      }\n                      incVal = 0;\n                      updateVal++;\n                  }\n              }\n              else {\n                  this.clearInterval();\n              }\n          }, 1000);\n      },\n      clearInterval() {\n          if (this.intervalId) {\n              clearInterval(this.intervalId);\n              this.intervalId = null;\n          }\n      },\n    axisRangeCalculated: function(args) {\n        if (args.axis.name === 'primaryXAxis') {\n            let lastPoint = args.axis.series[0].points[args.axis.series[0].points.length - 1].x;\n            args.maximum = new Date(lastPoint).getTime() + 2500;\n            let firstPoint = args.axis.series[0].points[0].x;\n            args.minimum = new Date(firstPoint).getTime() + 500;\n        }\n    },\n    pointRender: function(args) {\n        args.series.lastValueLabel.background = args.fill;\n    }\n  }\n};\n</script>"
    },
    {
      "target": "src/components/chart-live-stock-data/ChartView.vue",
      "content": "<template>\n  <Chart />\n</template>\n\n<script setup>\nimport Chart from '../../components/Chart.vue'\n</script>"
    }
  ]
}