JavaScript Chart Title
A Chart Title can be placed above, below, or either side of the chart, and be left, center or right aligned.
Chart Title Example (JavaScript)
Overview
This example demonstrates how to configure a multi-line chart title in SciChart.js using JavaScript. The chart is initialized with a custom title, set to "Multiline Chart Title", and styled with properties for font size, color, padding, and text alignment.
Technical Implementation
The chart is created by initializing a SciChartSurface, applying a custom theme, and setting up numeric axes with tailored axis titles via the axis.axisTitleStyle property (see NumericAxis Documentation). A FastLineRenderableSeries is added using an XyDataSeries sourced from randomly generated data, which illustrates efficient handling of dynamic data sets as detailed in the FastLineRenderableSeries documentation. Dynamic update functions are provided to modify the title text, alignment, position, and other style properties in real-time, following the approaches recommended in the Chart Styling - Chart Titles guide.
Features and Capabilities
- Dynamic Updates: The example includes functions to change the chart title and its alignment dynamically, demonstrating advanced customization techniques.
- Advanced Styling: Title styling options such as font size, color, and padding are configurable, allowing for multi-line title adjustments as explained in the Label Alignment and Positioning documentation.
- Efficient Rendering: The use of
FastLineRenderableSeriesensures optimized performance for rendering live data.
Integration and Best Practices
Although the provided source code is wrapped in a React component for demonstration purposes, the core implementation leverages JavaScript for initializing and updating the chart. Developers can integrate this approach into any JavaScript application by following practices from the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. For further details on managing data series, refer to the Working with Data section. Overall, this example illustrates how to combine efficient rendering, responsive updates, and advanced styling to create a powerful, high-performance chart using SciChart.js in a JavaScript environment.
javascript Chart Examples & Demos
See Also: Styling and Theming (11 Demos)
Chart Background Image with Transparency
Demonstrates how to create a JavaScript Chart with background image using transparency in SciChart.js
Styling a JavaScript Chart in Code
Demonstrates how to style a JavaScript Chart entirely in code with SciChart.js themeing API
Using Theme Manager in JavaScript Chart
Demonstrates our Light and Dark Themes for JavaScript Charts with SciChart.js ThemeManager API
Create a Custom Theme for JavaScript Chart
Demonstrates how to create a Custom Theme for a SciChart.js JavaScript Chart using our Theming API
Coloring Series per-point using the PaletteProvider
Demonstrates per-point coloring in JavaScript chart types with SciChart.js PaletteProvider API
JavaScript Point-Markers Chart
Demonstrates the different point-marker types for JavaScript Scatter charts (Square, Circle, Triangle and Custom image point-marker)
Dashed Line Styling
Demonstrates dashed line series in JavaScript Charts with SciChart.js
Data Labels
Show data labels on JavaScript Chart. Get your free demo now.
JavaScript Chart with Multi-Style Series
Demonstrates how to apply multiple different styles to a single series using RenderDataTransform
JavaScript Chart with lines split by thresholds
Demonstrates how to use a RenderDataTransform to split lines into multiple segments so they can be individually colored according to thresholds
JavaScript Order of Rendering Example
The JavaScript Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
