{"id":15410,"date":"2022-08-23T11:17:30","date_gmt":"2022-08-23T18:17:30","guid":{"rendered":"https:\/\/coderpad.io\/?p=15410"},"modified":"2023-03-28T10:50:57","modified_gmt":"2023-03-28T17:50:57","slug":"10-javascript-data-visualization-libs","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/10-javascript-data-visualization-libs\/","title":{"rendered":"10 JavaScript Data Visualization Libraries Every Front-End Developer Should Know About"},"content":{"rendered":"\n<p>Visuals are your best option for presenting data in the modern world. <em>In reality, no one has the time to read through a large amount of information.<\/em> You must be able to use data to tell your story in a way that is simple and quick for everyone to comprehend.<\/p>\n\n\n\n<p>Data visualization, otherwise known as data viz., refers to the process of presenting data in a visual or graphical format. With data visualization tools, you can quickly present data and make it easier to digest.&nbsp;<\/p>\n\n\n\n<p>As with every technical decision, choosing your tools is important based on their ease of integration, the number of features they provide, and their intuitiveness.<\/p>\n\n\n\n<p>Throughout this article, we&#8217;ll go over ten of the most commonly used Javascript data visualizations, some of which you&#8217;ll encounter frequently as a software engineer, others that I believe deserve more attention. <\/p>\n\n\n\n<p>We&#8217;ll look at various libraries that offer data visualization techniques, such as the basic level chart (bar charts, pie charts, and so on), financial charts (candlesticks, trading indicators), map charts, scatter plot charts, and many more. We\u2019ll also cover their capabilities and drawbacks, along with instructions and code samples on how to use them. Here&#8217;s the full list of libraries that we&#8217;ll cover:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#apexchart\">ApexChart<\/a><\/li>\n\n\n\n<li><a href=\"#chartjs\">Chart.js<\/a><\/li>\n\n\n\n<li><a href=\"#d3js\">D3.js<\/a><\/li>\n\n\n\n<li><a href=\"#techanjs\">Techan.js<\/a><\/li>\n\n\n\n<li><a href=\"#anychart\">AnyChart<\/a><\/li>\n\n\n\n<li><a href=\"#taucharts\">Taucharts<\/a><\/li>\n\n\n\n<li><a href=\"#zoomcharts\">Zoomcharts<\/a><\/li>\n\n\n\n<li><a href=\"#canvasjs\">Canvasjs<\/a><\/li>\n\n\n\n<li><a href=\"#highcharts\">Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"#toastuichart\">Toast UI Chart<\/a><\/li>\n<\/ul>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\"  data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apexchart\">ApexChart<\/h2>\n\n\n\n<p>ApexChart is an open-source charting library that helps you create beautiful and interactive charts with limited code. ApexChart supports 16 chart types, including line, bar, area, pie, candlestick, and heatmap.<\/p>\n\n\n\n<p>In addition to providing beautiful charts, some of ApexChart&#8217;s added advantages are that its charts are responsive and interactive\u2014they are automatically rendered with customized icons that let you control the zoom of your charts, pan through datasets, and even let you export rendered charts as a PNG, SVG or CSV file. You can also create dynamic charts that allow you to load data on selections. They offer over 10+ different theme palettes for styling charts as well.<\/p>\n\n\n\n<p>However, the Apexchart library is quite large, with its current version (v3.35.4) weighing in at around 496kb. As a result, when working with a large data set, you will begin to notice significant performance issues.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>You can include ApexChart CDN in your project markup with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/apexcharts\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Optionally, you can also install the library via npm with the command below:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">npm install apexcharts<\/code><\/span><\/pre>\n\n\n<p>Once installed, you can get started with rendering charts by creating an option object specifying your chart style and dataset. Below is an example of an area chart with a random dataset:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/apexcharts\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chart\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> options = {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">chart<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">280<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"area\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">dataLabels<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">enabled<\/span>: <span class=\"hljs-literal\">false<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">series<\/span>: &#91;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Series 1\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: &#91;<span class=\"hljs-number\">75<\/span>, <span class=\"hljs-number\">82<\/span>, <span class=\"hljs-number\">68<\/span>, <span class=\"hljs-number\">75<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 ],\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">fill<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"gradient\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">gradient<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">shadeIntensity<\/span>: <span class=\"hljs-number\">1<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">opacityFrom<\/span>: <span class=\"hljs-number\">0.7<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">opacityTo<\/span>: <span class=\"hljs-number\">0.9<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">stops<\/span>: &#91;<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">90<\/span>, <span class=\"hljs-number\">100<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">xaxis<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">categories<\/span>: &#91;<span class=\"hljs-string\">\"01 Jan\"<\/span>, <span class=\"hljs-string\">\"02 Jan\"<\/span>, <span class=\"hljs-string\">\"03 Jan\"<\/span>, <span class=\"hljs-string\">\"04 Jan\"<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 };\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> chart = <span class=\"hljs-keyword\">new<\/span> ApexCharts(<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\"#chart\"<\/span>), options);\n\u00a0 \u00a0 \u00a0 chart.render();\n\u00a0 \u00a0 <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231763&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>Performance-wise, you can also explore <a href=\"https:\/\/app.coderpad.io\/ZJP4PCEK\">this example<\/a> with 1000 random datasets to see ApexChart performance with a large dataset.<\/p>\n\n\n\n<p>To learn more: <a href=\"https:\/\/apexcharts.com\/docs\/installation\/\" target=\"_blank\" rel=\"noopener\">ApexChart Documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"chartjs\">Chart.js<\/h2>\n\n\n\n<p>Chart.js is one of the most used JavaScript data visualization libraries and the second most starred on GitHub after D3.js, with over 57k stars as at the time of writing this article.<\/p>\n\n\n\n<p>Chart.js provides simple, clean, and engaging charts that you can quickly incorporate into your application.<\/p>\n\n\n\n<p>Some of its advantages are that it\u2019s fairly easy to integrate this library into your application. It provides out-of-the-box support for nine different chart types, including scatter plot, line, bar, pie, donut, bubble, area, radar, and mixed chart &#8212; all of which are also responsive and accessible by default. Additionally, its integration includes customizable labels, legends, hover pop-ups, and series toggling.&nbsp;<\/p>\n\n\n\n<p>One of Chart.js&#8217; drawbacks is that its charts are rendered with a dull gray color by default, which can make styling different chart parts with different colors difficult when working with large datasets. You&#8217;ll also need to put in extra effort to support basic chart features like zooming and panning.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>Chart.js can be installed with npm via:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">chart<\/span><span class=\"hljs-selector-class\">.js<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or include its script CDN link in your markup like below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Chart.js usage is pretty much similar to that of ApexChart. To create a chart, you need to create a new instance of the <code>Chart<\/code> object while adding the chart target, its dataset, and additional option as its parameters. Below is an example of a simple pie chart created with chart.js:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chart\"<\/span>&gt;<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">canvas<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myChart\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"height: 60vh\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">canvas<\/span>&gt;<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> ctx = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"myChart\"<\/span>);\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> myChart = <span class=\"hljs-keyword\">new<\/span> Chart(ctx, {\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bar\"<\/span>,\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">labels<\/span>: &#91;<span class=\"hljs-string\">\"Red\"<\/span>, <span class=\"hljs-string\">\"Blue\"<\/span>, <span class=\"hljs-string\">\"Green\"<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">datasets<\/span>: &#91;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">\"# Ratings\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: &#91;<span class=\"hljs-number\">8<\/span>, <span class=\"hljs-number\">19<\/span>, <span class=\"hljs-number\">12<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">backgroundColor<\/span>: &#91;<span class=\"hljs-string\">\"#f44336\"<\/span>, <span class=\"hljs-string\">\"#3f51b5\"<\/span>, <span class=\"hljs-string\">\"#009688\"<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">borderWidth<\/span>: <span class=\"hljs-number\">2<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 ],\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">options<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">scales<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">y<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">beginAtZero<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">responsive<\/span>: <span class=\"hljs-literal\">false<\/span>,\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 });\n\u00a0 <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=225492&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>To learn more: <a href=\"https:\/\/www.chartjs.org\/docs\/latest\/\" target=\"_blank\" rel=\"noopener\">Chart.js documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"d3js\">D3.js<\/h2>\n\n\n\n<p>D3.js is a JavaScript data viz library for adding dynamic and interactive visualizations to web applications. It is one of the most used and currently the most starred JavaScript data viz library on GitHub (with over 102k stars currently). Its first version was released in 2011, which is partly why it is so ubiquitous<\/p>\n\n\n\n<p>D3.js differs from some of the other libraries mentioned in this tutorial.&nbsp; It does not directly provide charting features, such as how ApexCharts and Chart.js allow you to render charts by calling a single function. D3.js is more of a building block for constructing data visualization, i.e., it provides methods that let you gradually build your chart from ground up.<\/p>\n\n\n\n<p>For this reason, it\u2019s much more difficult to quickly create a simple chart with D3.js, as you need to know how its functions and modules work. As we&#8217;ll see below, it also takes some pretty long code to create a basic chart with the library itself. However, its integration with other JavaScript libraries like react and vue has made it fairly easier to use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>You can get started with using D3.js by including its CDN link (which export a global <code>d3<\/code> object) in your markup:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/d3@7\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also install D3 in a node.js project with the command <code>npm install d3<\/code>. Or using ES6 import:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"module\"<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 <span class=\"hljs-keyword\">import<\/span> * <span class=\"hljs-keyword\">as<\/span> d3 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"https:\/\/cdn.skypack.dev\/d3@7\"<\/span>;\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Let&#8217;s explore the following example of creating a simple line chart with D3.js:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/d3js.org\/d3.v4.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my_dataviz\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"actionscript\">\n\u00a0 <span class=\"hljs-keyword\">var<\/span> margin = { top: <span class=\"hljs-number\">10<\/span>, right: <span class=\"hljs-number\">30<\/span>, bottom: <span class=\"hljs-number\">30<\/span>, left: <span class=\"hljs-number\">60<\/span> },\n\u00a0 \u00a0 width = <span class=\"hljs-number\">460<\/span> - margin.left - margin.right,\n\u00a0 \u00a0 height = <span class=\"hljs-number\">400<\/span> - margin.top - margin.bottom;\n\n\u00a0 <span class=\"hljs-keyword\">var<\/span> svg = d3\n\u00a0 \u00a0 .select(<span class=\"hljs-string\">\"#my_dataviz\"<\/span>)\n\u00a0 \u00a0 .append(<span class=\"hljs-string\">\"svg\"<\/span>)\n\u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"width\"<\/span>, width + margin.left + margin.right)\n\u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"height\"<\/span>, height + margin.top + margin.bottom)\n\u00a0 \u00a0 .append(<span class=\"hljs-string\">\"g\"<\/span>)\n\u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"translate(\"<\/span> + margin.left + <span class=\"hljs-string\">\",\"<\/span> + margin.top + <span class=\"hljs-string\">\")\"<\/span>);\n\n\u00a0 d3.csv(\n\u00a0 \u00a0 <span class=\"hljs-string\">\"https:\/\/raw.githubusercontent.com\/holtzy\/data_to_viz\/master\/Example_dataset\/3_TwoNumOrdered_comma.csv\"<\/span>,\n\n\u00a0 \u00a0 <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(d)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> { date: d3.timeParse(<span class=\"hljs-string\">\"%Y-%m-%d\"<\/span>)(d.date), value: d.value };\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(data)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> x = d3\n\u00a0 \u00a0 \u00a0 \u00a0 .scaleTime()\n\u00a0 \u00a0 \u00a0 \u00a0 .domain(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 d3.extent(data, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(d)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> d.date;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })\n\u00a0 \u00a0 \u00a0 \u00a0 )\n\u00a0 \u00a0 \u00a0 \u00a0 .range(&#91;<span class=\"hljs-number\">0<\/span>, width]);\n\u00a0 \u00a0 \u00a0 svg\n\u00a0 \u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"g\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"translate(0,\"<\/span> + height + <span class=\"hljs-string\">\")\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .call(d3.axisBottom(x));\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> y = d3\n\u00a0 \u00a0 \u00a0 \u00a0 .scaleLinear()\n\u00a0 \u00a0 \u00a0 \u00a0 .domain(&#91;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-number\">0<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 d3.max(data, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(d)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> +d.value;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }),\n\u00a0 \u00a0 \u00a0 \u00a0 ])\n\u00a0 \u00a0 \u00a0 \u00a0 .range(&#91;height, <span class=\"hljs-number\">0<\/span>]);\n\u00a0 \u00a0 \u00a0 svg.append(<span class=\"hljs-string\">\"g\"<\/span>).call(d3.axisLeft(y));\n\n\u00a0 \u00a0 \u00a0 svg\n\u00a0 \u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"path\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .datum(data)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"fill\"<\/span>, <span class=\"hljs-string\">\"none\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"stroke\"<\/span>, <span class=\"hljs-string\">\"steelblue\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"stroke-width\"<\/span>, <span class=\"hljs-number\">1.5<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-string\">\"d\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 d3\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 .line()\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 .x(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(d)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> x(d.date);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 .y(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(d)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> y(d.value);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })\n\u00a0 \u00a0 \u00a0 \u00a0 );\n\u00a0 \u00a0 }\n\u00a0 );\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231775&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>With the code above, you can see how we had to first create an SVG element, load our chart data set from a remote API, and also use D3 to append this data into different paths in our SVG element.<\/p>\n\n\n\n<p>It\u2019s also worth mentioning that there\u2019s a <a href=\"https:\/\/d3-graph-gallery.com\/\" target=\"_blank\" rel=\"noopener\">D3.js graph gallery<\/a> which is a collection of ready-made charts created with D3, like the example.<\/p>\n\n\n\n<p>To learn more: <a href=\"https:\/\/github.com\/d3\/d3\/wiki\" target=\"_blank\" rel=\"noopener\">D3.js documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"techanjs\">Techan.js<\/h2>\n\n\n\n<p>Techan.js is a charting library built on top of D3.js for adding interactive financial charts to your application. Techan lets you add stock charts, including candlestick, OHCL, indicators, and further technical analysis, which is particularly useful for financial applications.<\/p>\n\n\n\n<p>While this library is still admirably serving its purpose and actively being used, it has not been updated for over 6 years now. This might be a concern if you\u2019d prefer a library that is being actively reviewed. Another drawback of Techan.js is that you\u2019ll need background knowledge of how D3.js works before you can understand how the library itself works.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>Before you can get started with using Techan.js in your web application, you\u2019ll need to include it\u2019s script CDN, along with D3.js CDN:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/d3js.org\/d3.v4.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"http:\/\/techanjs.org\/techan.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Explore the following example of creating a simple candlestick chart with Techan and D3.js:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\u00a0 <span class=\"hljs-selector-tag\">path<\/span><span class=\"hljs-selector-class\">.candle<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-attribute\">stroke<\/span>: <span class=\"hljs-number\">#000000<\/span>;\n\u00a0 }\n\n\u00a0 <span class=\"hljs-selector-tag\">path<\/span><span class=\"hljs-selector-class\">.candle<\/span><span class=\"hljs-selector-class\">.body<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-attribute\">stroke-width<\/span>: <span class=\"hljs-number\">0<\/span>;\n\u00a0 }\n\n\u00a0 <span class=\"hljs-selector-tag\">path<\/span><span class=\"hljs-selector-class\">.candle<\/span><span class=\"hljs-selector-class\">.up<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-attribute\">fill<\/span>: <span class=\"hljs-number\">#00aa00<\/span>;\n\u00a0 \u00a0 <span class=\"hljs-attribute\">stroke<\/span>: <span class=\"hljs-number\">#00aa00<\/span>;\n\u00a0 }\n\n\u00a0 <span class=\"hljs-selector-tag\">path<\/span><span class=\"hljs-selector-class\">.candle<\/span><span class=\"hljs-selector-class\">.down<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-attribute\">fill<\/span>: <span class=\"hljs-number\">#ff0000<\/span>;\n\u00a0 \u00a0 <span class=\"hljs-attribute\">stroke<\/span>: <span class=\"hljs-number\">#ff0000<\/span>;\n\u00a0 }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>&gt;<\/span>Update<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/d3js.org\/d3.v4.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"http:\/\/techanjs.org\/techan.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"actionscript\">\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> margin = { top: <span class=\"hljs-number\">20<\/span>, right: <span class=\"hljs-number\">20<\/span>, bottom: <span class=\"hljs-number\">30<\/span>, left: <span class=\"hljs-number\">50<\/span> },\n\u00a0 \u00a0 \u00a0 width = <span class=\"hljs-number\">960<\/span> - margin.left - margin.right,\n\u00a0 \u00a0 \u00a0 height = <span class=\"hljs-number\">500<\/span> - margin.top - margin.bottom;\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> parseDate = d3.timeParse(<span class=\"hljs-string\">\"%d-%b-%y\"<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> x = techan.scale.financetime().range(&#91;<span class=\"hljs-number\">0<\/span>, width]);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> y = d3.scaleLinear().range(&#91;height, <span class=\"hljs-number\">0<\/span>]);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> candlestick = techan.plot.candlestick().xScale(x).yScale(y);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> xAxis = d3.axisBottom().scale(x);\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> yAxis = d3.axisLeft().scale(y);\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> svg = d3\n\u00a0 \u00a0 \u00a0 .select(<span class=\"hljs-string\">\"body\"<\/span>)\n\u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"svg\"<\/span>)\n\u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"width\"<\/span>, width + margin.left + margin.right)\n\u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"height\"<\/span>, height + margin.top + margin.bottom)\n\u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"g\"<\/span>)\n\u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"translate(\"<\/span> + margin.left + <span class=\"hljs-string\">\",\"<\/span> + margin.top + <span class=\"hljs-string\">\")\"<\/span>);\n\n\u00a0 \u00a0 d3.csv(<span class=\"hljs-string\">\"data.csv\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(error, data)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> accessor = candlestick.accessor();\n\n\u00a0 \u00a0 \u00a0 data = data\n\u00a0 \u00a0 \u00a0 \u00a0 .slice(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">200<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .map(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(d)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 date: parseDate(d.Date),\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 open: +d.Open,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 high: +d.High,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 low: +d.Low,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 close: +d.Close,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 volume: +d.Volume,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 };\n\u00a0 \u00a0 \u00a0 \u00a0 })\n\u00a0 \u00a0 \u00a0 \u00a0 .sort(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(a, b)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">return<\/span> d3.ascending(accessor.d(a), accessor.d(b));\n\u00a0 \u00a0 \u00a0 \u00a0 });\n\n\u00a0 \u00a0 \u00a0 svg.append(<span class=\"hljs-string\">\"g\"<\/span>).attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"candlestick\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 svg\n\u00a0 \u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"g\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"x axis\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"translate(0,\"<\/span> + height + <span class=\"hljs-string\">\")\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 svg\n\u00a0 \u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"g\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"y axis\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .append(<span class=\"hljs-string\">\"text\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"rotate(-90)\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"y\"<\/span>, <span class=\"hljs-number\">6<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .attr(<span class=\"hljs-string\">\"dy\"<\/span>, <span class=\"hljs-string\">\".71em\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .style(<span class=\"hljs-string\">\"text-anchor\"<\/span>, <span class=\"hljs-string\">\"end\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .text(<span class=\"hljs-string\">\"Price ($)\"<\/span>);\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Data to display initially<\/span>\n\u00a0 \u00a0 \u00a0 draw(data.slice(<span class=\"hljs-number\">0<\/span>, data.length - <span class=\"hljs-number\">20<\/span>));\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Only want this button to be active if the data has loaded<\/span>\n\u00a0 \u00a0 \u00a0 d3.select(<span class=\"hljs-string\">\"button\"<\/span>)\n\u00a0 \u00a0 \u00a0 \u00a0 .on(<span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">()<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 draw(data);\n\u00a0 \u00a0 \u00a0 \u00a0 })\n\u00a0 \u00a0 \u00a0 \u00a0 .style(<span class=\"hljs-string\">\"display\"<\/span>, <span class=\"hljs-string\">\"inline\"<\/span>);\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">draw<\/span><span class=\"hljs-params\">(data)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 x.domain(data.map(candlestick.accessor().d));\n\u00a0 \u00a0 \u00a0 y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());\n\n\u00a0 \u00a0 \u00a0 svg.selectAll(<span class=\"hljs-string\">\"g.candlestick\"<\/span>).datum(data).call(candlestick);\n\u00a0 \u00a0 \u00a0 svg.selectAll(<span class=\"hljs-string\">\"g.x.axis\"<\/span>).call(xAxis);\n\u00a0 \u00a0 \u00a0 svg.selectAll(<span class=\"hljs-string\">\"g.y.axis\"<\/span>).call(yAxis);\n\u00a0 \u00a0 }\n\u00a0 <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231822&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>This example was recreated from <a href=\"https:\/\/github.com\/andredumas\/techan.js\/wiki\/Gallery\" target=\"_blank\" rel=\"noopener\">Techan.js gallery<\/a>, which also includes code examples for the different types of financial charts the library supports.<\/p>\n\n\n\n<p>To learn more: <a href=\"https:\/\/techanjs.org\/\" target=\"_blank\" rel=\"noopener\">Techan.js documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"anychart\">AnyChart<\/h2>\n\n\n\n<p>AnyChart is another interesting charting library offering a different suite of chart types, including the basics charts (bar, pie, and others), different stock charts, and even PERT charts.&nbsp;<\/p>\n\n\n\n<p>With AnyChart you can also integrate drawing tools into its stock charts, which is very useful in financial applications. AnyChart also offers chart localizations, with support for over 194 predefined locales, so you can visualize data for your users in different languages.<\/p>\n\n\n\n<p>However, while AnyChart is open-source and free for non-profit use, you\u2019ll need to purchase a license for use in commercial applications.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>AnyChart offers integration with different languages, libraries, and frameworks; however, for this tutorial, we\u2019ll be exploring its React plugin.<\/p>\n\n\n\n<p>We can add AnyChart to our React application by installing with the following command:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">npm install anychart-react<\/code><\/span><\/pre>\n\n\n<p>Once installed, we can then import its component and render a simple bar chart like below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> AnyChart <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"anychart-react\/dist\/anychart-react\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 <span class=\"hljs-keyword\">return<\/span> (\n\u00a0 \u00a0 <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AnyChart<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"bar\"<\/span> <span class=\"hljs-attr\">data<\/span>=<span class=\"hljs-string\">{&#91;3,<\/span> <span class=\"hljs-attr\">6<\/span>, <span class=\"hljs-attr\">2<\/span>, <span class=\"hljs-attr\">7<\/span>, <span class=\"hljs-attr\">9<\/span>]} <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Simple bar chart\"<\/span> \/&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n\u00a0 );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231857&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>For integration with other languages and frameworks, you can refer to their documentation page <a href=\"https:\/\/www.anychart.com\/technical-integrations\/samples\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"taucharts\">Taucharts<\/h2>\n\n\n\n<p>This is another interesting open-source chart library built on top of D3.js and mostly used for data exploration and analysis. However unlike Techan.js you don&#8217;t need to have prior knowledge of D3 to implement Taucharts.<\/p>\n\n\n\n<p>Taucharts has a nice framework and has lots of extensibility options. Its plugin infrastructure is adaptable, allowing you to write plugins quickly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>For a traditional HTML project, you\u2019ll need to include D3.js, Tauchart.js, and the Taucharts CSS file like below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/taucharts@2\/dist\/taucharts.min.css\"<\/span>\n\u00a0 \u00a0 \/&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-comment\">&lt;!-- .. --&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/d3js\/latest\/d3.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/taucharts@2\/dist\/taucharts.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You can also install with npm via:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">npm install taucharts<\/code><\/span><\/pre>\n\n\n<p>And once the installation is completed, you can get started with integrating it in your application by creating a new instance of the <code>Taucharts<\/code> object, including your dataset\/data source, chart type, and other additional options to style your chart as its parameters.<\/p>\n\n\n\n<p>Here\u2019s what creating a simple line chart looks like with Taucharts:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/taucharts@2\/dist\/taucharts.min.css\"<\/span>\n\u00a0 \u00a0 \/&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-comment\">&lt;!-- .. --&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/d3js\/latest\/d3.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/taucharts@2\/dist\/taucharts.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"line\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> datasource = &#91;\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"us\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">0<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"12-2013\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"us\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">10<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"01-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"us\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">15<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"02-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"us\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">12<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"03-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"us\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">16<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"04-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"us\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">13<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"05-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bug\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">21<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"01-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bug\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">19<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"02-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bug\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">23<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"03-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bug\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">26<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"04-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bug\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">23<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-string\">\"05-2014\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 ];\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> chart = <span class=\"hljs-keyword\">new<\/span> Taucharts.Chart({\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: datasource,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"line\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-string\">\"date\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-string\">\"count\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"type\"<\/span>,\n\u00a0 \u00a0 \u00a0 });\n\n\u00a0 \u00a0 \u00a0 chart.renderTo(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"line\"<\/span>));\n\u00a0 \u00a0 <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231880&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>To learn more: <a href=\"https:\/\/techanjs.org\/\" target=\"_blank\" rel=\"noopener\">Taucharts documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"zoomcharts\">Zoomcharts<\/h2>\n\n\n\n<p>Zoomcharts helps you add interactive data visualizations to your application with minimal input and development time by using its ready-to-go charts library. Zoomcharts supports different chart types, notably network charts, matrix charts, facet charts, time charts, and geo-map charts.<\/p>\n\n\n\n<p>Zoomcharts is free for non-production use, however, you\u2019ll also need to purchase a license and obtain an API key once your application is in production. Otherwise the library will start showing an error in your browser console.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>You can add Zoomcharts to your web project with its CDN link:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.zoomcharts-cloud.com\/1\/stable\/zoomcharts.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And depending on the type of chart you\u2019re trying to render, it&#8217;s pretty much easy to do with a few lines of code. Below is an example of a time chart from the&nbsp; zoomcharts documentation:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> t = <span class=\"hljs-keyword\">new<\/span> TimeChart({\n\u00a0 \u00a0 <span class=\"hljs-attr\">container<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"demo\"<\/span>),\n\u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>:\n\u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">units<\/span>:&#91;<span class=\"hljs-string\">\"h\"<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/zoomcharts.com\/dvsl\/data\/time-chart\/temperature-kuldiga-h.json\"<\/span>\n\u00a0 \u00a0 }\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231884&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>To learn more: <a href=\"https:\/\/zoomcharts.com\/en\/javascript-charts-library\/\" target=\"_blank\" rel=\"noopener\">Zoomcharts documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"canvasjs\">Canvasjs<\/h2>\n\n\n\n<p>Canvasjs offers a lightweight library for creating performant and elegant looking charts, with over 30 different customizable charts to choose from. Canvasjs stock chart, in comparison to some of the other stock chart libraries (like Techan.js), tends to be more intuitive and interactive. It also offers integration with the top JavaScript frameworks including React, Vue, and Angular, as well as with Java, Spring, and PHP.&nbsp;<\/p>\n\n\n\n<p>Additionally, like AnyChart, Canvasjs also offers localization of charts, so that you\u2019re able to render your chart elements in different languages.<\/p>\n\n\n\n<p>However, while Canvasjs is free for development use, the development version will add a watermark to all your charts, and you\u2019ll need to obtain a license to use it in production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>To get started, you first need to download the canvasjs compressed library <a href=\"https:\/\/canvasjs.com\/download-html5-charting-graphing-library\/?f=chart\" target=\"_blank\" rel=\"noopener\">here<\/a>. The downloaded file once uncompressed includes a <code>canvasjs.min.js<\/code> file, which you can link to your website. Optionally, you could include the CDN directly in your markup like below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/canvasjs.com\/assets\/script\/canvasjs.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And it&#8217;s pretty much easy to start creating any chart. Here\u2019s an example of a bubble chart from the Canvasjs documentation:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/canvasjs.com\/assets\/script\/canvasjs.min.js\"<\/span>&gt;<\/span><span class=\"handlebars\"><span class=\"xml\">\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-built_in\">window<\/span>.onload = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-keyword\">var<\/span> chart = <span class=\"hljs-keyword\">new<\/span> CanvasJS.Chart(<span class=\"hljs-string\">\"chartContainer\"<\/span>, {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">title<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"Comparison among Countries on Fertility Rate Vs Life Expectancy in 2009\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">axisX<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Life Expectancy\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">maximum<\/span>: <span class=\"hljs-number\">85<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">axisY<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Fertility Rate\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">legend<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">verticalAlign<\/span>: <span class=\"hljs-string\">\"bottom\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">horizontalAlign<\/span>: <span class=\"hljs-string\">\"left\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: &#91;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"bubble\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">legendText<\/span>: <span class=\"hljs-string\">\"Size of Bubble Represents Population\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">showInLegend<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">legendMarkerType<\/span>: <span class=\"hljs-string\">\"circle\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">toolTipContent<\/span>:\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-string\">\"&lt;strong&gt;{name}&lt;\/strong&gt; &lt;br\/&gt; Fertility Rate: {y}&lt;br\/&gt; Life Expectancy: {x} yrs&lt;br\/&gt; Population: {z} mn\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">dataPoints<\/span>: &#91;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">78.1<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">2.0<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">306.77<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"US\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">68.5<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">2.15<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">237.414<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Indonesia\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">72.5<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">1.86<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">193.24<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Brazil\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">76.5<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">2.36<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">112.24<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Mexico\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">50.9<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">5.56<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">154.48<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Nigeria\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">68.6<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">1.54<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">141.91<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Russia\"<\/span> },\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">82.9<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">1.37<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">127.55<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Japan\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">79.8<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">1.36<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">81.9<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Australia\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">72.7<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">2.78<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">79.71<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Egypt\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">80.1<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">1.94<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">61.81<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"UK\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">55.8<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">4.76<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">39.24<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Kenya\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">81.5<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">1.93<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">21.95<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Australia\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">68.1<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">4.77<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">31.09<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Iraq\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">47.9<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">6.42<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">33.42<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Afghanistan\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 { <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">50.3<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">5.58<\/span>, <span class=\"hljs-attr\">z<\/span>: <span class=\"hljs-number\">18.55<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Angola\"<\/span> },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ],\n\u00a0 \u00a0 \u00a0 \u00a0 });\n\n\u00a0 \u00a0 \u00a0 \u00a0 chart.render();\n\u00a0 \u00a0 \u00a0 };\n\u00a0 \u00a0 <\/span><\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chartContainer\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"height: 300px; width: 100%\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231890&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>For more information, and integrating with other JavaScript frameworks, refer to their <a href=\"https:\/\/canvasjs.com\/docs\/charts\/\" target=\"_blank\" rel=\"noopener\">official documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"highcharts\">Highcharts<\/h2>\n\n\n\n<p>Highcharts is another great data visualization solution offering interactive charting capability. Compared to the other libraries in this article, Highcharts charts seem to offer more ready-made chart types.&nbsp;<\/p>\n\n\n\n<p>Highcharts offers a lot of unique features, you can integrate your chart with different theme options, you can even create 3D charts, export charts in different formats, and convert your rendered charts to data tables on the fly. Another awesome feature is that you can create charts that are accessible to screen readers by adding descriptions to chart elements.&nbsp;<\/p>\n\n\n\n<p>However, while highcharts is also free for non-commercial and personal use, you\u2019ll need to purchase a license to integrate its libraries into commercial applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>It&#8217;s easy to get started with using highchart by adding its script CDN to your application:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.highcharts.com\/maps\/highmaps.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And depending on the additional plugins you want to use, you\u2019ll also need to import them independently.<\/p>\n\n\n\n<p>It also requires less code to create high-level charts with this library. With this map projection example from their documentation, we can see how easy it is to visualize the world population density on a map:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.highcharts.com\/maps\/highmaps.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.highcharts.com\/maps\/modules\/exporting.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 (<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> mapData = <span class=\"hljs-keyword\">await<\/span> fetch(\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-string\">\"https:\/\/code.highcharts.com\/mapdata\/custom\/world.topo.json\"<\/span>\n\u00a0 \u00a0 ).then(<span class=\"hljs-function\">(<span class=\"hljs-params\">response<\/span>) =&gt;<\/span> response.json());\n\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> fetch(\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/gh\/highcharts\/highcharts@v7.0.0\/samples\/data\/world-population-density.json\"<\/span>\n\u00a0 \u00a0 ).then(<span class=\"hljs-function\">(<span class=\"hljs-params\">response<\/span>) =&gt;<\/span> response.json());\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Initialize the chart<\/span>\n\u00a0 \u00a0 Highcharts.mapChart(<span class=\"hljs-string\">\"container\"<\/span>, {\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">title<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"Predefined zoomed area\"<\/span>,\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">mapNavigation<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">enabled<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">buttonOptions<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">verticalAlign<\/span>: <span class=\"hljs-string\">\"bottom\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">mapView<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">projection<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"WebMercator\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">center<\/span>: &#91;<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">58<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">2.8<\/span>,\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">colorAxis<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">1<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">1000<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"logarithmic\"<\/span>,\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">legend<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">title<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"Population density per km\u00b2\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">series<\/span>: &#91;\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mapData,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">joinBy<\/span>: &#91;<span class=\"hljs-string\">\"iso-a2\"<\/span>, <span class=\"hljs-string\">\"code\"<\/span>],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Population density\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">states<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">hover<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#a4edba\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">tooltip<\/span>: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">valueSuffix<\/span>: <span class=\"hljs-string\">\"\/km\u00b2\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 ],\n\u00a0 \u00a0 });\n\u00a0 })();\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231894&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>To learn more: <a href=\"https:\/\/www.highcharts.com\/docs\/index\" target=\"_blank\" rel=\"noopener\">Highcharts documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toastuichart\">Toast UI Chart<\/h2>\n\n\n\n<p>Toast UI chart is another open-source chart solution. Toast UI isn\u2019t a complete charting library per se; it\u2019s more of a JavaScript library providing UI components similar to Bootstrap. However, it has been included in this article since this type of thing is uncommon &#8211; UI libraries with support for charts.<\/p>\n\n\n\n<p>Some of Toasts UI Chart\u2019s best features are that it\u2019s lightweight, offers a wide range of chart types, and easily integrates charts via JavaScript components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use<\/h3>\n\n\n\n<p>You can install Toast UI Charts in your project with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">--save<\/span> <span class=\"hljs-keyword\">@toast-ui<\/span>\/chart<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Or load its CDN via:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/uicdn.toast.com\/chart\/latest\/toastui-chart.min.css\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/uicdn.toast.com\/chart\/latest\/toastui-chart.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here&#8217;s an interactive example of a live updating chart created with Toast UI chart:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span>\n\u00a0 <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>\n\u00a0 <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/uicdn.toast.com\/chart\/latest\/toastui-chart.min.css\n\/&gt;\n&lt;script src=\"<\/span><span class=\"hljs-attr\">https:<\/span>\/\/<span class=\"hljs-attr\">uicdn.toast.com<\/span>\/<span class=\"hljs-attr\">chart<\/span>\/<span class=\"hljs-attr\">latest<\/span>\/<span class=\"hljs-attr\">toastui-chart.min.js<\/span>\"&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chart-area\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\u00a0 <span class=\"hljs-keyword\">const<\/span> el = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"chart-area\"<\/span>);\n\u00a0 <span class=\"hljs-keyword\">const<\/span> data = {\n\u00a0 \u00a0 <span class=\"hljs-attr\">categories<\/span>: &#91;<span class=\"hljs-string\">\"1\"<\/span>, <span class=\"hljs-string\">\"2\"<\/span>, <span class=\"hljs-string\">\"3\"<\/span>, <span class=\"hljs-string\">\"4\"<\/span>, <span class=\"hljs-string\">\"5\"<\/span>, <span class=\"hljs-string\">\"6\"<\/span>, <span class=\"hljs-string\">\"7\"<\/span>, <span class=\"hljs-string\">\"8\"<\/span>, <span class=\"hljs-string\">\"9\"<\/span>, <span class=\"hljs-string\">\"10\"<\/span>],\n\u00a0 \u00a0 <span class=\"hljs-attr\">series<\/span>: &#91;\n\u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"A\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: &#91;<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">100<\/span>, <span class=\"hljs-number\">50<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">70<\/span>, <span class=\"hljs-number\">55<\/span>, <span class=\"hljs-number\">33<\/span>, <span class=\"hljs-number\">70<\/span>, <span class=\"hljs-number\">90<\/span>, <span class=\"hljs-number\">110<\/span>],\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"B\"<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">data<\/span>: &#91;<span class=\"hljs-number\">60<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">33<\/span>, <span class=\"hljs-number\">70<\/span>, <span class=\"hljs-number\">90<\/span>, <span class=\"hljs-number\">100<\/span>, <span class=\"hljs-number\">17<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">80<\/span>],\n\u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 ],\n\u00a0 };\n\u00a0 <span class=\"hljs-keyword\">const<\/span> options = {\n\u00a0 \u00a0 <span class=\"hljs-attr\">chart<\/span>: { <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"LiveUpdate\"<\/span>, <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">900<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">400<\/span> },\n\u00a0 \u00a0 <span class=\"hljs-attr\">xAxis<\/span>: { <span class=\"hljs-attr\">pointOnColumn<\/span>: <span class=\"hljs-literal\">false<\/span>, <span class=\"hljs-attr\">title<\/span>: { <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"X Title\"<\/span> } },\n\u00a0 \u00a0 <span class=\"hljs-attr\">yAxis<\/span>: { <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Y Title\"<\/span> },\n\u00a0 \u00a0 <span class=\"hljs-attr\">series<\/span>: { <span class=\"hljs-attr\">shift<\/span>: <span class=\"hljs-literal\">true<\/span> },\n\u00a0 };\n\n\u00a0 <span class=\"hljs-keyword\">const<\/span> chart = toastui.Chart.areaChart({ el, data, options });\n\u00a0 <span class=\"hljs-keyword\">let<\/span> index = <span class=\"hljs-number\">11<\/span>;\n\u00a0 <span class=\"hljs-keyword\">const<\/span> intervalId = setInterval(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> random = <span class=\"hljs-built_in\">Math<\/span>.round(<span class=\"hljs-built_in\">Math<\/span>.random() * <span class=\"hljs-number\">100<\/span>);\n\u00a0 \u00a0 <span class=\"hljs-keyword\">const<\/span> random2 = <span class=\"hljs-built_in\">Math<\/span>.round(<span class=\"hljs-built_in\">Math<\/span>.random() * <span class=\"hljs-number\">100<\/span>);\n\u00a0 \u00a0 chart.addData(&#91;random, random2], index.toString());\n\u00a0 \u00a0 index += <span class=\"hljs-number\">1<\/span>;\n\u00a0 \u00a0 <span class=\"hljs-keyword\">if<\/span> (index === <span class=\"hljs-number\">30<\/span>) {\n\u00a0 \u00a0 \u00a0 clearInterval(intervalId);\n\u00a0 \u00a0 }\n\u00a0 }, <span class=\"hljs-number\">1500<\/span>);\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231899&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<p>To learn more: <a href=\"https:\/\/ui.toast.com\/\" target=\"_blank\" rel=\"noopener\">Toast UI documentation<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Conclusion<\/h1>\n\n\n\n<p>And it\u2019s a wrap! Throughout this article, we\u2019ve explored ten different JavaScript data visualization libraries, the type of visualization tools they provide, additional features, their drawbacks, and how to get started with using them with interactive code samples.&nbsp;<\/p>\n\n\n\n<p>We can\u2019t definitively say which library is the best \u2013 that depends on how easily it integrates with your particular application and your intended use case \u2013 but hopefully, by now, you have some ideas on where to start.<\/p>\n\n\n\n<p><strong><em>I\u2019m Elijah Asaolu, and I\u2019m a software engineer and technical writer, actively sharing all I&#8217;ve learned through writing. You can also follow me on <\/em><\/strong><a href=\"https:\/\/twitter.com\/asaolu_elijah\" target=\"_blank\" rel=\"noopener\"><strong><em>Twitter<\/em><\/strong><\/a><strong><em> if you appreciate programming memes and tips.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Modern data dashboards require visualization to present data to their users correctly. In this article, Elijah walks us through 10 JavaScript data visualization libraries and how to use them.<\/p>\n","protected":false},"author":12,"featured_media":15552,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-15410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/15410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=15410"}],"version-history":[{"count":83,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/15410\/revisions"}],"predecessor-version":[{"id":34586,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/15410\/revisions\/34586"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/15552"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=15410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=15410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=15410"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=15410"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=15410"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=15410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}