Having both horizontal and verticle marker on a Line Chart

quachtoanlong
quachtoanlong Member
edited May 2024 in APIs & Domo Developer

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

Tagged:

Best Answer

  • ArborRose
    ArborRose Coach
    Answer ✓

    I don't know about the default line chart. But I can do it in a brick.

    image.png 

    <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! **

Answers

  • ArborRose
    ArborRose Coach
    Answer ✓

    I don't know about the default line chart. But I can do it in a brick.

    image.png 

    <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! **

  • quachtoanlong
    quachtoanlong Member
    https://community-forums.domo.com/main/discussion/comment/96198#Comment_96198

    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?

  • ArborRose
    ArborRose Coach

    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! **

  • quachtoanlong
    quachtoanlong Member

    Apologize for the confusion. I was referring to Domo’s native library. I captured this in the DOMO appstore:

    image.png

    https://amro-asia-org.domo.com/appstore/details/2FF0546ED3BE62B56BAA98A96188FEF2755B4A37C77A4077B7170B5CACC04904?origin=search

Categories