{"id":6972,"date":"2019-12-05T15:15:06","date_gmt":"2019-12-05T12:15:06","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6972"},"modified":"2026-04-03T15:41:12","modified_gmt":"2026-04-03T12:41:12","slug":"javascripthtml5-line-spline-charts-effective-forecasting","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/javascripthtml5-line-spline-charts-effective-forecasting\/","title":{"rendered":"JavaScript\/HTML5 Line & Spline Charts for Effective Forecasting"},"content":{"rendered":"

\n

\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, \n please contact us<\/a>,
and we will send it to you.\n <\/p>\n <\/div>\n <\/div>\n
\nThis article is a part of the series about DHTMLX JavaScript and HTML5 Charts<\/a> – providing insights and best practices for the most popular graph types. Today, we’ll try to find out what a line chart is used for and what design tricks are needed to provide a better user experience.<\/em> <\/p>\n

Test our charting library during a 30-day free trial<\/a> period.<\/em><\/p>\n

\"JavaScirpt<\/p>\n

A series of data points, joined by a line in a dot-to-dot fashion, can show startling results along its peaks and valleys. A simple line chart has the power to display the dynamic, highlight successes, and warn about potential dangers – all in seconds.<\/p>\n

Horizontal line charts are primarily used for displaying behavior over a period of time<\/strong>: technology trends by a year, price dynamics over a quarter, website page visits per hour, and so on. In most cases, the way the data is trending allows predicting easily the results<\/strong> of data not yet recorded.<\/p>\n

The time unit (years, months, days, etc.) is distributed evenly along the horizontal x-axis. The magnitude of each data element in the series is represented by its position on the vertical y-axis.<\/p>\n

Specificities of a JavaScript Dynamic Line Chart<\/h5>\n

\"Dynamic
\nCheck the sample ><\/a><\/p>\n

Dynamic or real-time charts are useful in displaying data that changes with time like a stock price, exchange rate, etc. These graphs are interactive, support animation and live updates.<\/p>\n

Keys to Create a Simple JavaScript Line Chart<\/h5>\n
Consider Adding Data Comparison<\/h6>\n

It’s possible to include more than one line on the same axis. Thus, for instance, you can compare the number of tasks completed by each team for a certain period of time. Such a horizontal line graph depicts the totals with a separate line for a team.<\/p>\n

However, if you’re building a multiple line chart, do not match too many data series. Graphs with more than 5 lines usually become cluttered and hard to understand.<\/p>\n

Prefer Contrasting Colors for Multiple Lines<\/h6>\n

Users should not spend too much time trying to perceive your graph clearly. So when you draw a JavaScript line chart with multiple items, set clear contrasting colors. The color difference allows viewers to capture the aha moment quickly.<\/p>\n

\"Simple
\nCheck the sample ><\/a><\/p>\n

The palette you choose should be pleasing to look at. We recommend avoiding jarring and eyesore colors as well as variations of the same shade. If you have to build a JS line chart for a dashboard or business report, select a few brand colors harmonizing with each other. <\/p>\n

Do Not Overwhelm Your JavaScript Line Chart with Text<\/h6>\n

When you add the text content, don’t be tempted to overcrowd the chart with too many symbols. There’s no need to mark every value on the x-axis and include all the data you have about the chart. Try to avoid bulky legends, paragraphs of texts, and multiple axis labels.<\/p>\n

\"Line<\/p>\n

Instead, you need readable titles and labels. The axis’ intervals have to be spaced evenly. Use special marks to label specific numbers that make sense for your datasets. Moreover, you can add tooltips<\/a> to show the values when a user hovers over the data items.<\/p>\n

Alternatives to a JS Horizontal Line Chart<\/h5>\n

We should note that line charts are not suitable for all kinds of data. For example, they fail in demonstrating percentages and proportions. Instead, consider choosing a pie chart<\/a>. If you want to show how values differ in various categories or at the same time intervals, consider using JavaScript bar charts<\/a>.<\/p>\n

Differences Between a Line Graph and Spline Chart<\/h6>\n

Are you looking for a way to display changes over time that isn’t a line graph? Then you may experiment with a JavaScript\/HTML5 spline chart. Line and spline charts are deeply related, the only difference is that the spline includes a fitted curve linking each data point in a series.<\/p>\n

\"JavaScript
\nCheck the sample ><\/a><\/p>\n

Why Choose DHTMLX JavaScript Visualization Library to Build a Line Chart<\/h5>\n

Our JavaScript charting library provides a simple and convenient way to integrate 10+ chart types into your web applications and interfaces. You can create Bar and X-Bar, Line and Spline, Area and Spline Area, Pie and Donut, Radar and Scatter graphs. Some of them have 3D variations.<\/p>\n

Modern Design<\/h6>\n

DHTMLX follows the guidelines of a Material Design<\/strong> styling. We’ll help you build scalable web interfaces with a user-friendly look and feel.<\/p>\n

Rich Configuration<\/h6>\n

A comprehensive DHTMLX Chart API<\/a> allows configuring any element to achieve the desired appearance without a hitch. For instance, you can add multiple data items<\/a> into your dynamic line chart. A new item will appear along the x-axis.<\/p>\n

var<\/span> config =<\/span> {<\/span>
\n    type:<\/span>"line"<\/span>,<\/span>
\n    scales:<\/span> {<\/span>
\n        "bottom"<\/span> :<\/span> {<\/span>
\n            text:<\/span> "text"<\/span>,<\/span>
\n            showText:<\/span> false<\/span>
\n        }<\/span>,<\/span>
\n        "left"<\/span> :<\/span> {<\/span>
\n            maxTicks:<\/span> 10<\/span>,<\/span>
\n            max:<\/span> 100<\/span>,<\/span>
\n            min:<\/span> 0<\/span>
\n        }<\/span>
\n    }<\/span>,<\/span>
\n    series:<\/span> [<\/span>
\n        {<\/span>
\n            value:<\/span> "value"<\/span>,<\/span>
\n            color:<\/span> "#5E83BA"<\/span>,<\/span>
\n            strokeWidth:<\/span> 2<\/span>
\n        }<\/span>
\n    ]<\/span>
\n}<\/span>;<\/span>
\n 
\nvar<\/span> chart =<\/span> new<\/span> dhx.Chart<\/span>(<\/span>"chart"<\/span>,<\/span> config)<\/span>;<\/span>
\nchart.data<\/span>.parse<\/span>(<\/span>[<\/span>
\n    {<\/span>
\n        value:<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 100<\/span>,<\/span>
\n        text:<\/span> "u"<\/span> +<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span> +<\/span> 1<\/span>
\n    }<\/span>,<\/span>
\n    {<\/span>
\n        value:<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 100<\/span>,<\/span>
\n        text:<\/span> "u"<\/span> +<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span> +<\/span> 2<\/span>
\n    }<\/span>,<\/span>
\n    {<\/span>
\n        value:<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 100<\/span>,<\/span>
\n        text:<\/span> "u"<\/span> +<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span> +<\/span> 3<\/span>
\n    }<\/span>
\n]<\/span>)<\/span>;<\/span>
\nfunction<\/span> add(<\/span>)<\/span> {<\/span>
\n    chart.data<\/span>.add<\/span>(<\/span>{<\/span>
\n        value:<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 100<\/span>,<\/span>
\n        text:<\/span> "u"<\/span> +<\/span> Date<\/span>.now<\/span>(<\/span>)<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

You can enable a legend and define its position<\/a>. Indeed it should be available if your goal is to display more than one data series. The legend will provide information about the tracked data to help your users translate the graph.<\/p>\n

var<\/span> chart =<\/span> new<\/span> dhx.Chart<\/span>(<\/span>"chart_container"<\/span>,<\/span>{<\/span>
\n    scales:<\/span> {<\/span>
\n        \/\/ scales config<\/span>
\n    }<\/span>,<\/span>
\n    series:<\/span> [<\/span>
\n        \/\/ list of series <\/span>
\n    ]<\/span>,<\/span>
\n    legend:<\/span> {<\/span>
\n        series:<\/span> [<\/span>"A"<\/span>,<\/span> "B"<\/span>,<\/span> "C"<\/span>]<\/span>,<\/span>
\n        valign:<\/span> "top"<\/span>,<\/span>
\n        halign:<\/span> "right"<\/span>
\n    }<\/span>    
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The API allows configuring a scale<\/a> and setting a title for it. Besides, you can add a threshold line<\/a> at any defined level to look for the particular value.<\/p>\n

var<\/span> chart =<\/span> new<\/span> dhx.Chart<\/span>(<\/span>"chart_container"<\/span>,<\/span>{<\/span>
\n    type:<\/span>"line"<\/span>,<\/span>
\n    scales:<\/span> {<\/span>
\n        "bottom"<\/span> :<\/span> {<\/span>
\n            text:<\/span> 'month'<\/span>
\n        }<\/span>,<\/span>
\n        "left"<\/span> :<\/span> {<\/span>
\n            padding:<\/span> 10<\/span>,<\/span>
\n            max:<\/span> 90<\/span>
\n        }<\/span>
\n    }<\/span>,<\/span>
\n    series:<\/span> [<\/span>
\n        {<\/span>
\n           value:<\/span> 'company A'<\/span>,<\/span>
\n           strokeWidth:<\/span> 2<\/span>
\n           \/\/ more options   <\/span>
\n        }<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Plus, our users can set maximum points<\/a> to show an average number of values if your data is too large to display all the values in the chart.<\/p>\n

var<\/span> chart =<\/span> new<\/span> dhx.Chart<\/span>(<\/span>"chart"<\/span>,<\/span> {<\/span>
\n    type:<\/span>"line"<\/span>,<\/span>
\n    maxPoints:<\/span>100<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Check the sample ><\/a><\/p>\n

Simple Customization<\/h6>\n

DHTMLX Charting library lets you modify several aspects of the chart’s appearance. You can set the type of the point of the data item<\/a> (circle, triangle, rectangular or rhombus state) and define its color. Series lines can be repainted and dashed. Moreover, developers can add new CSS classes in case they need specific options.<\/p>\n

Conclusion<\/h5>\n

A line chart is a powerful data visualization tool for many different areas, including finance, marketing, and project management. It is extremely effective for monitoring trends over a certain period of time and making predictions. If two or more lines are on the graph, it can be used as a comparison between them.<\/p>\n

DHTMLX Chart component is a part of the JavaScript widget library<\/a> – DHTMLX Suite. You can download a dhtmlxChart free trial version<\/a> as well as estimate a complete Suite kit with 20+ UI widgets included. <\/p>\n

Our advanced solutions allow building rich web interfaces that are compatible with all modern browsers. Plus, we offer examples of smooth integration into applications based on React, Angular, and Vue.JS. <\/p>\n

Access our documentation<\/a> to get more information about dhtmlxChart features. <\/p>\n

If you have questions for our team or want to share your opinion, do not hesitate to contact us<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

This article is a part of the series about DHTMLX JavaScript and HTML5 Charts – providing insights and best practices for the most popular graph types. Today, we’ll try …<\/p>\n","protected":false},"author":101013,"featured_media":6978,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,1],"tags":[33,21,10],"class_list":["post-6972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-uncategorized","tag-all-posts","tag-charts","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101013"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=6972"}],"version-history":[{"count":10,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6972\/revisions"}],"predecessor-version":[{"id":15371,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6972\/revisions\/15371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/6978"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=6972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=6972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=6972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}