{"library":"scichart","title":"SciChart.js High Performance JavaScript Chart Library","description":"SciChart.js is a high-performance JavaScript chart library (current stable version 5.1.4) engineered for demanding real-time and big-data visualization applications. It leverages WebGL2 and WebAssembly to render millions of data points smoothly, differentiating itself through exceptional speed and efficiency compared to alternatives like Chart.js, HighCharts, and Plotly. The library is actively maintained with frequent releases, including major versions like v5 that focus on significant performance improvements, smaller bundle sizes, and faster initialization. It is particularly suited for scientific, financial, medical, engineering, and enterprise applications requiring robust, feature-rich, and highly interactive charts.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install scichart"],"cli":null},"imports":["import { SciChartSurface } from 'scichart';","import { SciChartJSInitializer } from 'scichart';","import { NumericAxis } from 'scichart';","import { FastLineRenderableSeries } from 'scichart';","import { XyDataSeries } from 'scichart';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { \n  SciChartSurface, \n  SciChartJSInitializer, \n  NumericAxis, \n  FastLineRenderableSeries, \n  XyDataSeries, \n  ENumericFormat, \n  EAutoRange, \n  EAxisAlignment\n} from 'scichart';\n\n// Ensure you have a div with id 'scichart-root' in your HTML\n// <div id=\"scichart-root\" style=\"width: 800px; height: 600px;\"></div>\n\nasync function drawChart() {\n  // SciChart.js is commercial software. A free community edition is available.\n  // For commercial use, acquire a license key from scichart.com/licensing-scichart-js\n  // SciChartJSInitializer.initSciChart({ licenseKey: process.env.SCICHART_LICENSE_KEY ?? '' });\n\n  // Initialize SciChart.js - required once per application\n  await SciChartJSInitializer.initSciChart();\n\n  const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-root');\n\n  // Create X and Y Axes\n  const xAxis = new NumericAxis(wasmContext, {\n    axisTitle: 'X-Axis Title',\n    labelFormat: ENumericFormat.Decimal,\n    labelPrecision: 1,\n    autoRange: EAutoRange.Always,\n    axisAlignment: EAxisAlignment.Bottom\n  });\n  const yAxis = new NumericAxis(wasmContext, {\n    axisTitle: 'Y-Axis Title',\n    labelFormat: ENumericFormat.Decimal,\n    labelPrecision: 2,\n    autoRange: EAutoRange.Always,\n    axisAlignment: EAxisAlignment.Left\n  });\n\n  sciChartSurface.xAxes.add(xAxis);\n  sciChartSurface.yAxes.add(yAxis);\n\n  // Create a DataSeries\n  const dataSeries = new XyDataSeries(wasmContext);\n  for (let i = 0; i < 100; i++) {\n    dataSeries.append(i, Math.sin(i * 0.1) * 10 + Math.random() * 2);\n  }\n\n  // Create a RenderableSeries and add the DataSeries\n  const renderableSeries = new FastLineRenderableSeries(wasmContext, {\n    dataSeries: dataSeries,\n    strokeThickness: 3,\n    stroke: 'steelblue'\n  });\n\n  sciChartSurface.renderableSeries.add(renderableSeries);\n}\n\ndrawChart();","lang":"typescript","description":"This quickstart initializes SciChart.js, creates a 2D chart surface within a specified HTML element, adds numeric X and Y axes, and then plots a simple FastLineRenderableSeries with generated sine wave data. It demonstrates the core setup for a basic chart.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}