What is the method for inserting indicators between yAxis values in a yAxis ChartJs graph?

Question

What is the method for inserting indicators between yAxis values in a yAxis ChartJs graph?

I have a line chart displaying the link below: https://i.sstatic.net/yUAHf.png

There is a noticeable gap between 0-0.7 on the chart. I am looking to add an indicator similar to the one shown in this image:

https://i.sstatic.net/pRjsY.png

The desired outcome would resemble this example: https://i.sstatic.net/IaqM5.png

When attempting to draw something on the ChartJs chart using annotations, I encountered difficulty setting intervals for drawing lines. Here's what I attempted:

   annotation: {
  annotations: [{
            drawTime: 'afterDraw', // overrides annotation.drawTime if set
            id: 'a-line-1', // optional
            type: 'line',
            mode: 'vertical',
            scaleID: 'y-axis-0',
    value: 0,
    borderColor: '#000',
            borderWidth: 2,
        }]
  }

Unfortunately, there are no accepted values like yMax and yMin when drawing lines, so I am unsure how to proceed. Any assistance with this issue would be greatly appreciated.

For reference, here is the Fiddle link: http://jsfiddle.net/3du6ya1c/

javascript html css chart.js

Answer 1

Answer №1

The Plugin Core API provides various hooks for executing custom code. One useful hook is the afterDraw hook, which allows you to draw an image directly on the canvas using CanvasRenderingContext2D.

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales['y-axis-0'];
    var image = new Image();
    image.src = 'https://i.sstatic.net/zyhEv.png',
    ctx.drawImage(image, xAxis.left - 11, yAxis.bottom - 16, 20, 10);    
    ctx.restore();
  }
}],

Check out the following example code snippet to see how it can be implemented.

new Chart(document.getElementById("myChart"), {
  type: "line",
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      var image = new Image();
      image.src = 'https://i.sstatic.net/zyhEv.png',
      ctx.drawImage(image, xAxis.left - 10, yAxis.bottom - 16, 20, 10);     
      ctx.restore();
    }
  }],
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "APAC RE index",
      data: [0.7, 0.8, 0.9, 1, 0.9, 0.8, 0.7],
      fill: false,
      borderColor: "rgb(255, 0, 0)"
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0.65,
          stepSize: 0.1,
          callback: (value, index, values) => index + 1 == values.length ? 0 : value
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

~

Answer 2

The Plugin Core API provides various hooks for executing custom code. One useful hook is the afterDraw hook, which allows you to draw an image directly on the canvas using CanvasRenderingContext2D.

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales['y-axis-0'];
    var image = new Image();
    image.src = 'https://i.sstatic.net/zyhEv.png',
    ctx.drawImage(image, xAxis.left - 11, yAxis.bottom - 16, 20, 10);    
    ctx.restore();
  }
}],

Check out the following example code snippet to see how it can be implemented.

new Chart(document.getElementById("myChart"), {
  type: "line",
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      var image = new Image();
      image.src = 'https://i.sstatic.net/zyhEv.png',
      ctx.drawImage(image, xAxis.left - 10, yAxis.bottom - 16, 20, 10);     
      ctx.restore();
    }
  }],
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "APAC RE index",
      data: [0.7, 0.8, 0.9, 1, 0.9, 0.8, 0.7],
      fill: false,
      borderColor: "rgb(255, 0, 0)"
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0.65,
          stepSize: 0.1,
          callback: (value, index, values) => index + 1 == values.length ? 0 : value
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

~

Answer 3

Answer №2

Consider utilizing box annotation and defining the y-axis and x-axis range for it.

annotation: {
      annotations: [{
        drawTime: 'afterDraw', // overrides annotation.drawTime if set
        id: 'a-line-1', // optional
        type: 'box',
        borderWidth: 10,
        borderColor: 'green',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        xMin: "January",
        xMax: "January",
        yMax: 0.7,
        yMin: 0.0,
      }]
    }

Take a look at this example in action.

Answer 4

Consider utilizing box annotation and defining the y-axis and x-axis range for it.

annotation: {
      annotations: [{
        drawTime: 'afterDraw', // overrides annotation.drawTime if set
        id: 'a-line-1', // optional
        type: 'box',
        borderWidth: 10,
        borderColor: 'green',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        xMin: "January",
        xMax: "January",
        yMax: 0.7,
        yMin: 0.0,
      }]
    }

Take a look at this example in action.

What is the method for inserting indicators between yAxis values in a yAxis ChartJs graph?

Answer №1

Answer №2

Similar questions

What is the best approach to selectively insert a portion of a fully loaded page from $.ajax(), all while running embedded scripts?

Error encountered: Circular reference issue was encountered when attempting to retrieve navigator.plugins with the use of Selenium and Python

Caution when using a React form: Value of `true` has been detected for a non-boolean attribute `validate`

React - Dealing with rendering issue when toggling a button using LocalStorage and State

The header does not extend fully to the top edge

Make sure to wait for the complete loading of all content in the AJAX response before showing it on

Incorporate a smooth transition effect to a dynamically resizing div button

Using Redux to Implement Conditional Headers in ReactJS

It is not possible to add items to an array

Ways to retrieve child state in React?

Numerous websites with scroll-based navigation

Prevent any clicking on the page for a brief period of time following the execution of a function

retrieve the current page/url using an attribute selector

The appearance of the mock button varies between the development and production environments due to CSS styling

Manage Camera Movement for 360-Degree Image Viewing in A-Frame

Having trouble with VueJS method not getting called after an asynchronous function callback?

Firefox detects video interference from webcam

What is the best way to preserve an apostrophe within a variable in JavaScript without it being replaced?

Printing content using JavaScript on a point of sale (POS) printer with

Utilizing the jQuery slideToggle method on the specified target element