Question

Technologies:

javascript

Tolerim

a month ago

What is the method for inserting Minor ticks in Chart.js that lie between Major ticks?

I am currently working with [email protected] and [email protected]. My goal is to display 9 minor ticks between each two major ticks in Time Cartesian Axis. I can successfully see the gridline on major ticks with labels, but I also need to display gridlines on minor ticks without labels. Currently, my code looks like this:

scales: {
          x: {
            type: 'time',
          time: {
              displayFormats: {
                month: 'dd MMM yy'
              },

              unit: 'day'
            },
            
            ticks: {
              color: "black",
                            
            },
           
            grid {
              DrawOnChartArea : false
            },
            
          },

        y: {
            type: 'linear',
            position:'left'
            ticks: {
              color: "black"
                   },
            grid:{
            display = false
                }
          },
          y1: {
            type: 'linear',           
            display: true,
            position: 'right',
            ticks: {
              color: "black",
              
              },
            grid:{
            display = false
                }
            }
           }
          }

To achieve the desired design where the minor grid lines are of the same length, I am striving to modify the existing code. The new code should display 9 minor ticks between every two major ticks in Time Cartesian Axis with gridlines on minor ticks without labels:

scales: {
          x: {
            type: 'time',
          time: {
              displayFormats: {
                month: 'dd MMM yy'
              },

              unit: 'day'
            },
            
            ticks: {
              color: "black",
              maxTicksLimit: 20,
              source: 'data',
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
                            
            },
           
            grid {
              DrawOnChartArea : false,
              tickMarkLength: 12,
              borderWidth: 1,
              color: 'rgba(0, 0, 0, 0.1)',
              borderDash: [5, 5],
              z: -1
            },

          },

        y: {
            type: 'linear',
            position:'left'
            ticks: {
              color: "black"
                   },
            grid:{
            display = false
                }
          },
          y1: {
            type: 'linear',           
            display: true,
            position: 'right',
            ticks: {
              color: "black",

              },
            grid:{
            drawBorder: false,
            color: 'rgba(0, 0, 0, 0.1)',
            borderDash: [5, 5],
            zeroLineColor: 'rgba(0, 0, 0, 0.25)',
            z: -1
                }
            }
           }
          }

This should help me achieve the required gridline design as shown in the image using Chart.js. Let me know if you have any other queries.

Answers(2)

Tolerim

a month ago

To achieve the desired design with 9 minor ticks between each two major ticks in Time Cartesian Axis, you can add the following code snippet under the 'ticks' property of 'x' scale:

ticks: {
    color: "black",
    maxTicksLimit: 10,
    minor: {
        count: 9,
        ticks: {
          display: false,
          color: "rgba(0, 0, 0, 0.1)",
          drawBorder: false,
          length: 8,
        },
        gridLines: {
          display: true,
          color: "rgba(0, 0, 0, 0.1)",
          drawBorder: false,
          tickMarkLength: 0,
        },
    },
},

In this code, we have added the 'maxTicksLimit' property to limit the maximum number of ticks to 10 (1 major tick + 9 minor ticks) and 'minor' property to specify the count of minor ticks. We have set 'ticks.display' property to false to hide the labels of minor ticks and 'ticks.color' to set the color of minor tick marks. To draw the grid lines for minor ticks, we have added the 'gridLines' property with 'display', 'color', 'drawBorder', and 'tickMarkLength' properties according to the requirements. The 'length' property under 'ticks' is used to set the length of minor tick marks. By default, minor tick marks have a length of 3px, but we have set it to 8px. Here is the modified code:

scales: {
  x: {
    type: 'time',
    time: {
        displayFormats: {
            month: 'dd MMM yy'
        },
        unit: 'day'
    },
    ticks: {
      color: "black",
      maxTicksLimit: 10,
      minor: {
          count: 9,
          ticks: {
            display: false,
            color: "rgba(0, 0, 0, 0.1)",
            drawBorder: false,
            length: 8,
          },
          gridLines: {
            display: true,
            color: "rgba(0, 0, 0, 0.1)",
            drawBorder: false,
            tickMarkLength: 0,
          },
      },
    },
    grid: {
      drawOnChartArea: false,
    },
  },
  y: {
    type: 'linear',
    position: 'left',
    ticks: {
      color: "black",
    },
    grid: {
      display: false,
    }
  },
  y1: {
    type: 'linear',
    display: true,
    position: 'right',
    ticks: {
      color: "black",
    },
    grid: {
      display: false,
    }
  }
}

Accepted Answer

I see. You can try adding the following code to your existing code to display 9 minor ticks between every two major ticks in Time Cartesian Axis with gridlines on minor ticks without labels:

ticks: {
  color: "black",
  maxTicksLimit: 20,
  source: 'data',
  autoSkip: true,
  maxRotation: 0,
  minRotation: 0,
  minor: {
    autoSkip: true,
    maxTicksLimit: 9
  }
},
gridLines: {
  drawOnChartArea : false,
  tickMarkLength: 12,
  borderWidth: 1,
  color: 'rgba(0, 0, 0, 0.1)',
  borderDash: [5, 5],
  z: -1,
  drawTicks: {
    display:false
    },
    drawBorder:true
}

This should help you achieve the required gridline design as shown in the image using Chart.js. Let me know if you have any other queries.