0

I want to align the y-axis tick labels below the gridLines of linechart in chartJS.

Here's what I've got so far:

enter image description here

But, i want to display same:

enter image description here

My options:

options={{
        legend: { display: false },
        tooltips: {
          mode: 'index',
          intersect: false
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          xAxes: [
            {
              display: false,
              gridLines: {
                display: false,
                drawBorder: false
              }
            }
          ],
          yAxes: [
            {
              // display: false,
              ticks: {
                maxTicksLimit: 4,
                // labelOffset: 10,
                // display: false
              },
              pointLabels: {
                fontColor: '#E14640',
                fontSize: 11
              },
              gridLines: {
                display: true,
                drawBorder: false,
                color: '#898989',
                maxTicksLimit: 3,
                borderDash: [3, 5]
              }
            }
          ]
        },
        plugins: {
          datalabels: {
            display: false
          }
        }
      }}

I'm not able to find any option in the chart options to do such a thing. Please help Updated: 2019/01/10

I found two solution:

  1. Use chartjs plugin, use chart plugin event then draw text below gridlines
  2. Recommended: get ticks from chartjs (in example: ticks: [0,5,10]) and get height of chart. Create some ticks label (with html) and append into chartjs (use position: absolute)

ps. sorry, my skill english is very bad!

san
  • 1,515
  • 11
  • 18
  • To me, it's not clear what you want to achieve. You write, you want to place y-axis tick labels above the grid lines but the ("want to display") image show a chart where y-axis tick labels appear underneath the grid lines and also inside the chart. Can you please clarify? – uminder Jan 02 '20 at 15:55
  • Sorry, i want to display tick labels as 2nd images. – san Jan 07 '20 at 02:41
  • I found a solution: https://stackoverflow.com/questions/43677197/how-to-position-yaxes-labels-in-chartjs. But when hover on chart, tick label is hidden – san Jan 07 '20 at 02:42

0 Answers0