This VB6 implementation may be the smallest source code for a useful chart to date (to my knowledge)! The World smallest chart plots only positive values, namely it takes values from zero up to an upper bound. To take into account the negative values, you can use the chart project that is shown here. The projects in this repository show two js charts and both use the HTML5 canvas object. The first one from file shortest_chart.html contains the shortest chart source code. Basically the implementation is represented by a function named Chart that draws some consecutive numeric values on a canvas object. The second chart found in file simplest_chart_with_axes.html contains an addition to the first, namely it adds the x-axis and y-axis, and the corresponding baseline ticks. There are also two implementations in the js folder that store the Chart function in a separate ".js" file. For more detailed information, note that these native Charts in Javascript, were published in the supplementary materials of the book entitled Algorithms in Bioinformatics: Theory and Implementation. The lines below show how this Chart function can be called:

<kbd>Version 2.0</kbd> of this compact chart takes into account both positive and negative values from an input. Previously in [chart version 1.0](https://github.com/Gagniuc/World-smallest-js-chart-v1.0), only values from zero to <i>n</i> have been considered, where <i>n</i> was a positive value. Thus, chart 2.0 takes into account a lower bound as well as an upper bound. The lower bound represents the lowest value whereas the upper bound represents the highest value over the input. The projects in this repository show two js charts and both use the HTML5 canvas object. The first one from file <kbd>chart_small.html</kbd> contains the shortest chart source code. Basically the implementation is represented by a function named <kbd>Chart</kbd> that draws some consecutive numeric values on a canvas object. The second chart found in file <kbd>chart_axis.html</kbd> contains an addition to the first, namely it draws the <kbd>x-axis</kbd> and <kbd>y-axis</kbd>, and the corresponding baseline ticks. There are also two implementations in the <kbd>js</kbd> folder that store the Chart function in a separate <kbd>".js"</kbd> file. For more detailed information, note that these native Charts in Javascript, were published in the supplementary materials of the book entitled <i>Algorithms in Bioinformatics: Theory and Implementation</i>. The screenshot below shows the output of chart 2.0. This output contains three different signals, each with a different color (red, black, blue):


Live:https://gagniuc.github.io/World-smallest-js-chart-v2.0/

How does it work? The Chart function contains a loop that makes a number of iterations (<i>i</i>) equal to the number of terms present in the sequence (<i>s</i>). Inside the main loop, the coordinates above the canvas object are calculated based on the maximum value, namely according to the value found in the <i>mx</i> variable. Thus, the <kbd>y-axis</kbd> is represented by the height (<i>h</i>) of the canvas object divided by the value in the <i>mx</i> variable (<i>h</i>/<i>mx</i>), and the result is multiplied by the current value in the sequence (s[<i>i</i>]). To position the zero values at the bottom of the chart, the <kbd>y-axis</kbd> is reversed by subtracting the result (the <i>y</i> value) from the height (<i>h</i>) of the canvas object. However, for a better visualization, the implementation of this chart narrows the <kbd>y-axis</kbd> and shows only the region between the two values. To obtain this relative reduction, the minimum value was taken into account. Thus, the following change was made to the previous Chart 1.0 function, namely:

<imgsrc="https://github.com/Gagniuc/World-smallest-js-chart-v2.0/blob/main/img/ylu.png?raw=true"height="100">

In contrast, the <kbd>x-axis</kbd> is calculated by dividing the length of the canvas object by the total number of terms in the sequence (<b>w/s.length</b>), and the

result is multiplied by the iteration number (<i>i</i>):

<imgsrc="https://github.com/Gagniuc/World-smallest-js-chart-v2.0/blob/main/img/x.png?raw=true"height="100">

Where <i>mn</i> is the minimum value and <i>mx</i> is the maximum value found over the signal (consecutive numeric values spaced by delimiters), <i>h</i> is the canvas height, and s[<i>i</i>] is the current value from the input. Note that the inner workings of the Chart function were fully described for the[previous implementations](https://github.com/Gagniuc/World-smallest-js-chart-v1.0). This concludes the changes related to the Chart function.

The lines below show how this <kbd>Chart</kbd> function from above can be called:

<i>Paul A. Gagniuc. Algorithms in Bioinformatics: Theory and Implementation. John Wiley & Sons, Hoboken, NJ, USA, 2021, ISBN: 9781119697961.</i>