JavaScript GraphicsGraphic LibrariesJavaScript libraries to use for both Artificial Intelligence graphs and other charts: Show
Table of Contents
Table of Contents
Plotly.jsPlotly.js is a charting library that comes with over 40 chart types, 3D charts, statistical graphs, and SVG maps. Learn More ... Chart.jsChart.js comes with many built-in chart types:
Learn More ... Google ChartFrom simple line charts to complex tree maps, Google Chart provides a number of built-in chart types:
Learn More ... I need to make a really complicated diagram for a website, in which the hierarchy will be a bit messy: arrows will go up and down, sometimes an element will point to several others, and sometimes there will be several elements pointing to the same one. I have found this method, but it doesn't allow more than one parent for an element and therefore won't do the trick in this case. It has to be done in HTML/CSS, because my intention is to add some Javascript to change the content of the blocks dinamically. This is an example of the level of complexity I need to achieve: In previous tutorials we’ve learned how to create different types of charts including bar charts, thermometer charts, and donut charts. Today we’ll continue this journey by building a CSS-only organizational chart. Ready to test your CSS skills? The Organizational Chart We’re BuildingHere’s the CSS chart we’ll be creating: It consists of four levels and describes the hierarchical structure of a company. What is an Organizational Chart?To find out what an organizational chart is, let's borrow Wikipedia's definition:
Here’s an example: By S.s.kulkarni9090 - Own work, CC BY-SA 3.0This type of chart is commonly used for presenting the relationships between the people or departments of a company. On a corporate website, you will probably find it on the “About Us” or “Company” page. You’ll also see organizational charts used for family trees (check out the British Royal Family tree and line of succession on the BBC’s website). They’re ideally suited for illustrating hierarchy. 1. Specify the ContainerOur chart will live inside a container: <div class="container"> <!-- Chart goes here --> </div> 2. Define Some Basic StylesBefore going through its levels, we’ll set up a few reset rules and helper classes: :root { --level-1: #8dccad; --level-2: #f5cc7f; --level-3: #7b9fe0; --level-4: #f27c8d; --black: black; } * { padding: 0; margin: 0; box-sizing: border-box; } ol { list-style: none; } body { margin: 50px 0 100px; text-align: center; font-family: "Inter", sans-serif; } .container { max-width: 1000px; padding: 0 10px; margin: 0 auto; } .rectangle { position: relative; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } Notice the Note: for simplicity, I haven’t optimized the CSS. This will help you get a better understanding of the styles of each level. 3. Specify the LevelsAt this point, we’re ready to specify the chart levels; as we discussed earlier, here we’ll have four of them: Each level will represent a role in a company starting from the highest-ranking one. Level #1The first level will only include a single node: HTMLTo describe it, we’ll use an <h2 class="level-1 rectangle">...</h2> CSSWe’ll use its /*CUSTOM VARIABLES HERE*/ .level-1 { width: 50%; margin: 0 auto 40px; background: var(--level-1); } .level-1::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: var(--black); } Level #2The second level will consist of two nodes: As we’ll see in a moment, each node will include other child nodes. These child nodes will represent lower levels of the managerial hierarchy. HTMLTo describe it, we’ll use an ordered list with two list items. Each list item will contain an <ol class="level-2-wrapper"> <li> <h2 class="level-2 rectangle">...</h2> </li> <li> <h2 class="level-2 rectangle">...</h2> </li> </ol> CSSThanks to CSS Grid, we’ll create the layout for this level. Next, we’ll use the /*CUSTOM VARIABLES HERE*/ .level-2-wrapper { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); } .level-2-wrapper::before { content: ""; position: absolute; top: -20px; left: 25%; width: 50%; height: 2px; background: var(--black); } .level-2-wrapper::after { display: none; content: ""; position: absolute; left: -20px; bottom: -20px; width: calc(100% + 20px); height: 2px; background: var(--black); } .level-2-wrapper li { position: relative; } .level-2-wrapper > li::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: var(--black); } .level-2 { width: 70%; margin: 0 auto 40px; background: var(--level-2); } .level-2::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: var(--black); } .level-2::after { display: none; content: ""; position: absolute; top: 50%; left: 0%; transform: translate(-100%, -50%); width: 20px; height: 2px; background: var(--black); } Notice that we also define the Level #3The third level will include four nodes. We’ll associate the first two nodes with the first node of the second level, while the last two with its second node: HTMLStill, inside the initial list where the second level lives, we’ll define two new lists. Each one of them will contain two list items. For each item will specify an <ol class="level-2-wrapper"> <li> ... <ol class="level-3-wrapper"> <li> <h3 class="level-3 rectangle">...</h3> </li> <li> <h3 class="level-3 rectangle">...</h3> </li> </ol> </li> <li> ... <ol class="level-3-wrapper"> <li> <h3 class="level-3 rectangle">...</h3> </li> <li> <h3 class="level-3 rectangle">...</h3> </li> </ol> </li> </ol> CSSThanks again to CSS Grid, we’ll position the nodes. In the same way, we’ll set the /*CUSTOM VARIABLES HERE*/ .level-3-wrapper { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; width: 90%; margin: 0 auto; } .level-3-wrapper::before { content: ""; position: absolute; top: -20px; left: calc(25% - 5px); width: calc(50% + 10px); height: 2px; background: var(--black); } .level-3-wrapper > li::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); width: 2px; height: 20px; background: var(--black); } .level-3 { margin-bottom: 20px; background: var(--level-3); } Level #4We’ll need sixteen nodes for the fourth level. These will equally be distributed into four lists. Each third-level node will include one list: HTMLStill, inside the initial list where the second level lives, we’ll define four new lists. Each one of them will contain four list items. For each item will specify an <ol class="level-2-wrapper"> <li> ... <ol class="level-3-wrapper"> <li> ... <ol class="level-4-wrapper"> <li> <h4 class="level-4 rectangle">...</h4> </li> ... </ol> </li> <li> ... <ol class="level-4-wrapper"> <li> <h4 class="level-4 rectangle">...</h4> </li> ... </ol> </li> </ol> </li> <li> ... <ol class="level-3-wrapper"> <li> ... <ol class="level-4-wrapper"> <li> <h4 class="level-4 rectangle">...</h4> </li> ... </ol> </li> <li> ... <ol class="level-4-wrapper"> <li> <h4 class="level-4 rectangle">...</h4> </li> ... </ol> </li> </ol> </li> </ol> CSSOnce more, we’ll set out the /*CUSTOM VARIABLES HERE*/ .level-4-wrapper { position: relative; width: 80%; margin-left: auto; } .level-4-wrapper::before { content: ""; position: absolute; top: -20px; left: -20px; width: 2px; height: calc(100% + 20px); background: var(--black); } .level-4-wrapper li + li { margin-top: 20px; } .level-4 { font-weight: normal; background: var(--level-4); } .level-4::before { content: ""; position: absolute; top: 50%; left: 0%; transform: translate(-100%, -50%); width: 20px; height: 2px; background: var(--black); } Organizational Charts and Going ResponsiveMaking an organizational chart responsive is tricky. I remember myself having to reconstruct the markup one or two times until coming up with this version. So, if you plan to create such a chart, I recommend you follow a mobile-first approach. With all this in mind, here’s its mobile layout: To accomplish this behavior, we have to modify some styles: @media screen and (max-width: 700px) { .rectangle { padding: 20px 10px; } .level-1, .level-2 { width: 100%; } .level-1 { margin-bottom: 20px; } .level-1::before, .level-2-wrapper > li::before { display: none; } .level-2-wrapper, .level-2-wrapper::after, .level-2::after { display: block; } .level-2-wrapper { width: 90%; margin-left: 10%; } .level-2-wrapper::before { left: -20px; width: 2px; height: calc(100% + 40px); } .level-2-wrapper > li:not(:first-child) { margin-top: 50px; } } We’ve Finished Our CSS Chart!Congrats, folks! Without writing a single line of JavaScript, we managed to build a fully functional organizational chart. Let’s remind ourselves of what we built: Of course, keep in mind that our chart has a specific structure. Depending on your needs, you might want to enrich its content or modify its layout. If you need something more advanced or dynamic, have a look at some JavaScript libraries like Highcharts.js. Have you ever created a CSS chart? If so, please share your experience with us! More CSS Charts (Sometimes With JavaScript)If you still need some inspiration, don’t forget to check at my other charts in the Tuts+ archive or do a quick search on CodePen. As always, thanks a lot for reading! Did you find this post useful? George Martsoukos George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (Tuts+, SitePoint, LottieFiles, Scotch, Awwwards). He loves anything related to the Web and he is addicted to learning new technologies every day. How do you draw a diagram in CSS?How to create the diagram. Step 1: Sketch out the diagram. To create the diagram, start by sketching it out on a piece of paper or on a spreadsheet. ... . Step 2: Create the HTML. ... . Step 3: Create the CSS for the grid. ... . Step 4: Style the blocks. ... . Step 4: Position the blocks within the grid. ... . Step 5: Position and Style the SVG connectors.. How do I create a pie chart in HTML and CSS?You can create a Pie Chart in HTML using a simple CSS function called conic-gradient . First, we add a <div> element to our HTML page, which acts as a placeholder for our pie chart. And finally we are ready to populate the pie chart with our data. How do you draw a graph in HTML?The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. How do you make a graph on a website?All you have to do is choose a design, and set a few options about the design style. Give your graph some data—a title and labels, as well as the data that forms the actual graph. Provide some information about labels, and set your font. Preview the graph to make sure you don't need to make any changes. |