Chart js not showing dotted x and y base axis


Currently on version 2.9.4
I managed to set dotted lines on the axis but there’s still a normal line on the axis Y and the X base axis.}
So what gridLines object and borderDash does is adding the effect of dotts, but still we can see that there is a line on the Y axis.

CODE:

      options = {
        scales: {
          yAxes: [
            {
              ticks: {
                stepSize: 20,
                fontFamily: 'Mukta',
                fontSize: 10,
                gridLines: {
                  borderDash: [2],
                }
              },
              gridLines: {
                borderDash: [2],
              }
            },
          ],
          xAxes: [
            {
              type: 'time',
              time: {
                displayFormats: {
                  week: 'MMM D',
                  day: 'MMM D',
                },
                ...range,
              },
              ticks: {
                fontFamily: 'Mukta',
                fontSize: 10,
              },
              gridLines: {
                borderDash: [2],
              }
            },
          ],
        },
        legend: {
          labels: {
            fontFamily: 'Mukta',
            fontSize: 12,
          },
          position: 'bottom',
        },
      }

enter image description here

Source: JavaSript – Stack Overflow

November 18, 2021
Category : News
Tags: chart.js | charts | javascript | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.