Having both horizontal and verticle marker on a Line Chart
Hi guys,
As in the title, is there any way to add two reference lines, one verticle and one horizontal in a DOMO line chart? The solution can be DDX or the default line chart.
From that, is there any way to add the third horizontal… if there are ways…
Thanks,
Long
Best Answer
-
I don't know about the default line chart. But I can do it in a brick.
<html> <head> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script> </head> <body> <canvas id="myChart"></canvas> </body> </html>
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Dataset', data: [65, 59, 80, 81, 56, 55, 40], borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1, fill: false }] }, options: { scales: { x: { beginAtZero: true }, y: { beginAtZero: true } }, plugins: { annotation: { annotations: { verticalLine: { type: 'line', xMin: 3, // Position on the X axis xMax: 3, borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 2 }, horizontalLine: { type: 'line', yMin: 70, // Position on the Y axis yMax: 70, borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 2 } } } } } });
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **2
Answers
-
I don't know about the default line chart. But I can do it in a brick.
<html> <head> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script> </head> <body> <canvas id="myChart"></canvas> </body> </html>
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Dataset', data: [65, 59, 80, 81, 56, 55, 40], borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1, fill: false }] }, options: { scales: { x: { beginAtZero: true }, y: { beginAtZero: true } }, plugins: { annotation: { annotations: { verticalLine: { type: 'line', xMin: 3, // Position on the X axis xMax: 3, borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 2 }, horizontalLine: { type: 'line', yMin: 70, // Position on the Y axis yMax: 70, borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 2 } } } } } });
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **2 -
Thank you very much, Arbor.
Apologize first for this following basic question, but do you know how to do it using the Phoenix brick template?
0 -
Sorry, I don't know what a Phoenix brick template is.
** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **0 -
Apologize for the confusion. I was referring to Domo’s native library. I captured this in the DOMO appstore:
https://amro-asia-org.domo.com/appstore/details/2FF0546ED3BE62B56BAA98A96188FEF2755B4A37C77A4077B7170B5CACC04904?origin=search
0
Categories
- All Categories
- 1.8K Product Ideas
- 1.8K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 300 Workbench
- 6 Cloud Amplifier
- 9 Federated
- 2.9K Transform
- 101 SQL DataFlows
- 622 Datasets
- 2.2K Magic ETL
- 3.9K Visualize
- 2.5K Charting
- 747 Beast Mode
- 59 App Studio
- 41 Variables
- 686 Automate
- 176 Apps
- 453 APIs & Domo Developer
- 47 Workflows
- 10 DomoAI
- 36 Predict
- 15 Jupyter Workspaces
- 21 R & Python Tiles
- 395 Distribute
- 113 Domo Everywhere
- 276 Scheduled Reports
- 6 Software Integrations
- 125 Manage
- 122 Governance & Security
- 8 Domo Community Gallery
- 38 Product Releases
- 10 Domo University
- 5.4K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 108 Community Announcements
- 4.8K Archive