--- title: "Plots" slug: "app-plots" updated: 2025-11-06T17:58:12Z published: 2025-11-06T17:58:12Z canonical: "docs.doc-know.com/app-plots" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.doc-know.com/llms.txt > Use this file to discover all available pages before exploring further. # Plots ### Plots **Plots** are graphical visualizations that you can generate in real time from your app's scripts. Plots are generated using the popular open-source library [Chart.js](https://www.chartjs.org). Using this flexible library means that generating almost any visualization is possible. ### Gallery Below are a few examples of plot types: | Vertical | Horizontal | Multi Axis | | --- | --- | --- | | ![image](https://quickchart.io/chart?c=%7B%0A%20%20%22type%22%3A%20%22bar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%22January%22%2C%0A%20%20%20%20%20%20%22February%22%2C%0A%20%20%20%20%20%20%22March%22%2C%0A%20%20%20%20%20%20%22April%22%2C%0A%20%20%20%20%20%20%22May%22%2C%0A%20%20%20%20%20%20%22June%22%2C%0A%20%20%20%20%20%20%22July%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%201%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba%28255%2C%2099%2C%20132%2C%200.5%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb%28255%2C%2099%2C%20132%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-31%2C%0A%20%20%20%20%20%20%20%20%20%20-70%2C%0A%20%20%20%20%20%20%20%20%20%20-30%2C%0A%20%20%20%20%20%20%20%20%20%20-33%2C%0A%20%20%20%20%20%20%20%20%20%20-9%2C%0A%20%20%20%20%20%20%20%20%20%2014%2C%0A%20%20%20%20%20%20%20%20%20%20-41%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%202%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba%2854%2C%20162%2C%20235%2C%200.5%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb%2854%2C%20162%2C%20235%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%2073%2C%0A%20%20%20%20%20%20%20%20%20%2041%2C%0A%20%20%20%20%20%20%20%20%20%2029%2C%0A%20%20%20%20%20%20%20%20%20%2061%2C%0A%20%20%20%20%20%20%20%20%20%20-65%2C%0A%20%20%20%20%20%20%20%20%20%2059%2C%0A%20%20%20%20%20%20%20%20%20%2038%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22responsive%22%3A%20true%2C%0A%20%20%20%20%22legend%22%3A%20%7B%0A%20%20%20%20%20%20%22position%22%3A%20%22top%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20false%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Bar%20Chart%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D) | ![image](https://quickchart.io/chart?c=%7B%0A%20%20%22type%22%3A%20%22horizontalBar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%22January%22%2C%0A%20%20%20%20%20%20%22February%22%2C%0A%20%20%20%20%20%20%22March%22%2C%0A%20%20%20%20%20%20%22April%22%2C%0A%20%20%20%20%20%20%22May%22%2C%0A%20%20%20%20%20%20%22June%22%2C%0A%20%20%20%20%20%20%22July%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%201%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba%28255%2C%2099%2C%20132%2C%200.5%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb%28255%2C%2099%2C%20132%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-32%2C%0A%20%20%20%20%20%20%20%20%20%2062%2C%0A%20%20%20%20%20%20%20%20%20%2064%2C%0A%20%20%20%20%20%20%20%20%20%2041%2C%0A%20%20%20%20%20%20%20%20%20%20-31%2C%0A%20%20%20%20%20%20%20%20%20%20-32%2C%0A%20%20%20%20%20%20%20%20%20%2087%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%202%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba%2854%2C%20162%2C%20235%2C%200.5%29%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb%2854%2C%20162%2C%20235%29%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%209%2C%0A%20%20%20%20%20%20%20%20%20%20-100%2C%0A%20%20%20%20%20%20%20%20%20%20-13%2C%0A%20%20%20%20%20%20%20%20%20%2064%2C%0A%20%20%20%20%20%20%20%20%20%20-57%2C%0A%20%20%20%20%20%20%20%20%20%2026%2C%0A%20%20%20%20%20%20%20%20%20%2020%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22elements%22%3A%20%7B%0A%20%20%20%20%20%20%22rectangle%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%202%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22responsive%22%3A%20true%2C%0A%20%20%20%20%22legend%22%3A%20%7B%0A%20%20%20%20%20%20%22position%22%3A%20%22right%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20false%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Horizontal%20Bar%20Chart%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D) | ![image](https://quickchart.io/chart?c=%7B%0A%20%20%22type%22%3A%20%22bar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%22January%22%2C%0A%20%20%20%20%20%20%22February%22%2C%0A%20%20%20%20%20%20%22March%22%2C%0A%20%20%20%20%20%20%22April%22%2C%0A%20%20%20%20%20%20%22May%22%2C%0A%20%20%20%20%20%20%22June%22%2C%0A%20%20%20%20%20%20%22July%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%201%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgb%28255%2C%2099%2C%20132%29%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgb%28255%2C%20159%2C%2064%29%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgb%28255%2C%20205%2C%2086%29%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgb%2875%2C%20192%2C%20192%29%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgb%2854%2C%20162%2C%20235%29%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgb%28153%2C%20102%2C%20255%29%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgb%28255%2C%2099%2C%20132%29%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22y%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20226%2C%0A%20%20%20%20%20%20%20%20%20%2016%2C%0A%20%20%20%20%20%20%20%20%20%20-44%2C%0A%20%20%20%20%20%20%20%20%20%2084%2C%0A%20%20%20%20%20%20%20%20%20%20-11%2C%0A%20%20%20%20%20%20%20%20%20%20-14%2C%0A%20%20%20%20%20%20%20%20%20%2025%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%202%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgb%28201%2C%20203%2C%20207%29%22%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22y1%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-61%2C%0A%20%20%20%20%20%20%20%20%20%2021%2C%0A%20%20%20%20%20%20%20%20%20%20-68%2C%0A%20%20%20%20%20%20%20%20%20%20-50%2C%0A%20%20%20%20%20%20%20%20%20%20-56%2C%0A%20%20%20%20%20%20%20%20%20%2089%2C%0A%20%20%20%20%20%20%20%20%20%20-95%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20false%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Bar%20Chart%20-%20Multi%20Axis%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22tooltips%22%3A%20%7B%0A%20%20%20%20%20%20%22mode%22%3A%20%22index%22%2C%0A%20%20%20%20%20%20%22intersect%22%3A%20true%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22scales%22%3A%20%7B%0A%20%20%20%20%20%20%22yAxes%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22id%22%3A%20%22y%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22linear%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%22left%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22id%22%3A%20%22y1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22linear%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22gridLines%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22drawOnChartArea%22%3A%20false%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D) |