Table of Contents
How can I Implement Finance Charts into My JavaScript Web Application Using FusionCharts?
FusionCharts contains over 100 charts that you can quickly implement into your web app. Let’s take a look at three of our most helpful and popular finance charts to get you started.How Can I Implement a Sparkline Chart in My React App?
Sparkline helps you quickly and efficiently display important KPIs on your executive dashboard. At first glance, it looks pretty similar to a line chart. How it differs is that it is presented in a smaller graphic format and includes inline text. Here is an example:FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "marimekko", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });
Source Code
You can view the source code right here.How Can I Implement a Candlestick Chart in My React App?
Candlestick charts help you visualize the movement of current and future asset prices. The charts display an asset’s open, close, high, and low price information via a boxed representation. Here is an example:Promise.all([ loadData( "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json" ), loadData( "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-schema.json" ) ])2. Then you have to pass the data to the .then handler. You also have to create two constants, called datastore and dataSource.
.then(function(res) { const data = res[0]; const schema = res[1]; const dataStore = new FusionCharts.DataStore(); const dataSource = { chart: {}, caption: { text: "Apple Inc. Stock Price" },3. Next, you have to define the subcaption and y-axis values:
subcaption: { text: "Stock prices from January 1980 - November 2011" }, yaxis: [ { plot: { value: { open: "Open", high: "High", low: "Low", close: "Close" }, type: "candlestick" }, format: { prefix: "$" }, title: "Stock Value" } ] };4. After that, create a new object called dataSource.data.
dataSource.data = dataStore.createDataTable(data, schema);5. Now, you can render the Candlestick chart:
new FusionCharts({ type: "timeseries", renderAt: "chart-container", width: "100%", height: "500", dataSource: dataSource }).render(); });
Source Code
You can find the source code here.How Can I Implement Box and Whisker Charts in My React App?
Box and whisker charts conveniently display medians, quartiles, and deviations of large data sets. Here is an example that visualizes employee distribution across different companies in ascending order by median age:FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "boxandwhisker2d", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });