JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

JavaScript

{
  id: 'rangeTicks',
  afterRender: (chart, args, opts) => {
      if (opts.ticks === undefined) {
        return
      }

      let {
        ctx,
        canvas,
        scales: {
          x,
          y
        }
      } = chart;
      let {
        ticks,
        offset,
        textColor,
        fontString
      } = opts;
      let xStart = x.getPixelForValue(x.ticks[x.ticks.length - 1].value) + (offset || 0);
      let width = 26 // 13;
      // let width = (canvas.width - xStart)/1.6;
      ;


      ticks.forEach((tick) => {
          if (tick.from === "min") {
            tick.from = y.min;
          }

          if (tick.to === "max") {
            tick.to = y.max;
          }

          if (tick.to === "minValue") {
            if (y.min > $ {
                cD.minValue
              }) {
              tick.to = y.min
            } else {
              tick.to = $ {
                cD.minValue
              }
            }

            if (tick.from === "minValue") {
              if (y.min > $ {
                  cD.minValue
                }) {
                tick.from = y.min
              } else {
                tick.from = $ {
                  cD.minValue
                }
              }

              if (tick.to === "maxValue") {
                if (y.max < $ {
                    cD.maxValue
                  }) {
                  tick.to = y.max
                } else {
                  tick.to = $ {
                    cD.maxValue
                  }
                }
              }

              if (tick.from === "maxValue") {
                if (y.max < $ {
                    cD.maxValue
                  }) {
                  tick.from = y.max
                } else {
                  tick.from = $ {
                    cD.maxValue
                  }
                }
              }


              ctx.save();
              let center = {}
              var roundRect = function(ctx, x, y, w, h, r) {
                var x2...