Methodologies and Libraries

We publish this page to explain exactly how Free Chart Maker works—what runs in your browser, which third-party libraries we use, and how exports/ CSV parsing are implemented. This transparency supports accuracy and trust.

Privacy at a glance: Your CSV is parsed locally in your browser. We DO NOT save any of your data (either from CSV or manually entered) to our servers.

1) Third-Party Libraries

1.1 Chart Libraries

Name: Chart.js
CDN: https://cdn.jsdelivr.net/npm/chart.js
Purpose: Renders charts (bar, line, pie, radar etc.) on HTML <canvas>.

Name: chartjs-plugin-datalabels
CDN: https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels
Purpose: Displays data labels directly on chart elements.

Name: chartjs-chart-treemap
CDN: https://cdn.jsdelivr.net/npm/chartjs-chart-treemap
Purpose: Adds treemap chart type support for Chart.js.

1.2 Download / Export Libraries

PNG/JPG Export: 100% native Browser APIs (no external library)
APIs: Canvas - toDataURL("image/png") or toDataURL("image/jpeg")

SVG Export: html2canvas
CDN: html2canvas 1.4.1
Purpose: Renders the charted DOM region to a bitmap inside a canvas, then wraps it in an SVG container for download.

1.3 CSV Upload / Parsing

No external libraries are used here. We rely on built-in browser APIs and native JavaScript:

<input type="file" accept=".csv"> for file selection
FileReader.readAsText() (UTF-8) to read the file contents

2) Export Methodologies

2.1 PNG / JPG (Raster)

We render charts on <canvas> with Chart.js.
For download, we call canvas.toDataURL("image/png") or canvas.toDataURL("image/jpeg") and programmatically click a temporary <a> element with download attribute.
Transparency: PNG preserves transparency; JPG uses a solid background.

2.2 SVG Export (Bitmap-in-SVG Wrapper)

We use html2canvas to rasterize the chart region and embed the resulting bitmap in an SVG container. This yields an .svg file that is widely compatible, but the chart itself is not pure vector.

If you require true vector: consider a client-side SVG renderer or a custom exporter that reconstructs Chart.js elements as SVG primitives (rect/text/line). We can explore this as a roadmap item.

2.3 Sizes and Aspect Ratios

Supported Aspect Ratios: 1:1, 4:3, 5:4, 3:2, 16:9
Sizes: Select a size (width × height) in pixels which is calculated automatically based on the chosen aspect ratio.
Compatibility: Works for PNG, JPG, and SVG.
HiDPI Support: Internal canvas can be scaled by device pixel ratio for sharper output.

3) CSV Handling (Local-Only)

We parse with FileReader to read the contents of the uploaded CSV file directly in the browser.
CSV content stays in the browser. We do not upload it to our servers.
Data exists only in memory for the session unless you export or copy it yourself.

4) Application Stack

Frontend: ASP.NET (Web Forms), HTML5, CSS3, JavaScript
Language: C#
Database: Microsoft SQL Server
Target Framework: .NET Framework

Note: The stack supports the website’s UI, content pages, and samples. User CSV data is not persisted server-side by the charting tool.

5) Accessibility & UX Notes

Charts on canvas are paired with textual labels and control names for assistive technologies.
Where practical, we provide tabular summaries so values are readable by screen readers.
Color choices target sufficient contrast; labels can be toggled for readability. The website is checked with Lighthouse tool guidelines for Contrast ratio.

6) Security & Integrity

Core functionality runs locally in your browser. Exports and CSV parsing use built-in Web APIs.
Third-party assets (Chart.js, plugins, html2canvas) are loaded via trusted CDNs.
We don't save any of your chart data on our servers.

Contact us

If you have any questions on the above, need help or want to suggest features, use our Contact Form. For more information on reaching contacting, please visit our Contact Page.