Bar-Graph.com provides an online graph-making tool for creating, customizing, and exporting charts and diagrams. This page describes the libraries, technologies, and methods used by our graph-making tools.
1. Plotly.js — Chart Rendering Library
Plotly.js is the primary chart-rendering library used by Bar-Graph.com. It is loaded from the official Plotly CDN.
Plotly.js handles the rendering and customization of most supported charts, including their data, labels, axes, legends, colors, and layout.
Bar-Graph.com uses Plotly.js methods such as Plotly.react() to update charts and Plotly.toImage() to generate downloadable chart images.
Official resources:
- Plotly.js website: https://plotly.com/javascript/
- Plotly.js documentation: https://plotly.com/javascript/reference/
- Plotly.js source code: https://github.com/plotly/plotly.js
2. Custom SVG and HTML Rendering
Not every visualization on Bar-Graph.com uses Plotly.js. Two specialized diagram types use custom rendering methods:
- Venn Diagram Maker: Uses SVG elements to draw overlapping circles and display labels.
- Organizational Chart Maker: Uses HTML elements and CSS to display organizational relationships in a hierarchical layout.
These custom implementations allow the diagrams to use layouts suited to their specific purposes.
3. JavaScript and Native Browser APIs
Bar-Graph.com uses JavaScript for interactive controls, data editing, chart configuration, and export operations.
Built-in browser technologies support several features without requiring separate third-party libraries.
Examples include:
- Blob and URL APIs: Create downloadable files in the browser.
- XMLSerializer: Converts SVG elements into serialized SVG markup.
- Canvas API: Converts custom SVG diagrams into raster images for JPG and PNG exports.
- Browser print functionality: Opens the browser’s print workflow when users select the PDF option.
- File APIs: Read uploaded CSV files using the browser’s file-reading capabilities.
4. CSV Import and Export
Bar-Graph.com includes its own JavaScript CSV parser rather than relying on a separate CSV parsing library.
The CSV import process reads the selected file in the browser, separates rows and columns, and loads the data into the graph editor. The parser accounts for quoted fields and commas inside quoted values.
Users can also export chart data as a CSV file. The CSV content is generated directly in JavaScript and prepared for download.
5. Chart Export Methodologies
Bar-Graph.com provides several export options, using different methods depending on the chart type.
| Format | Method used |
| JPG | Plotly image generation for standard charts; browser Canvas conversion for custom diagrams |
| PNG | Plotly image generation for standard charts; browser Canvas conversion for custom diagrams |
| SVG | Plotly-rendered SVG for standard charts and custom SVG markup for specialized diagrams |
| CSV | Generates a downloadable CSV file from the current chart data |
| Opens the browser’s print dialog, where users can select a PDF printer or save-to-PDF option |
PDF creation depends on the browser’s print and PDF-saving capabilities. Bar-Graph.com does not bundle a dedicated PDF-generation library in the inspected source.
6. HTML5 and CSS3
HTML5 provides the structure of the graph-making interface, including the data editor, chart preview, configuration controls, and export options.
CSS3 handles styling, responsive layouts, chart-maker themes, buttons, form controls, and the presentation of custom diagrams.
These technologies work alongside JavaScript and Plotly.js to provide an interactive interface.
7. WordPress and PHP
Bar-Graph.com integrates with WordPress using PHP and the WordPress API.
The PHP code registers graph-maker shortcodes, loads the required stylesheet and JavaScript files, and generates the tool’s HTML structure.
The JavaScript and CSS assets provide the interactive chart editor and its visual presentation.
8. Third-Party Dependencies
The inspected source code identifies the following external JavaScript library dependency:
- Plotly.js 2.35.2 — used to render and export standard charts.
The inspected source does not show separate dependencies on Chart.js, D3.js, html2canvas, Papa Parse, or jsPDF.
Other functionality, including CSV parsing and specialized diagram rendering, is implemented using custom JavaScript and native browser APIs.
9. Data Handling
CSV import and chart rendering are implemented in browser-side JavaScript. The inspected source does not contain a dedicated server-side CSV upload or chart-data storage feature.
However, this does not independently establish how the complete website, hosting environment, analytics, or other WordPress extensions process information. Please refer to our Privacy Policy for the website’s broader data-handling practices.
10. Open-Source Licensing
Plotly.js is an open-source project. Its official repository provides the library’s source code and licensing information.
For details about Plotly.js licensing, please consult its repository:
https://github.com/plotly/plotly.js
Bar-Graph.com’s own code and any third-party components remain subject to their respective applicable licenses.
If you have questions or suggestions about the technologies used by Bar-Graph.com, please visit our Contact Us page.