Log scale values seem extreme

[JetForMe]

Log-type charts have really bizarre y-axis min and max.

I've tried starting my line charts with log scale, changing it after the fact, and setting the minimum to 0 after setting the type to log, to no avail:

Linear:

Log:

Source code can be found here: https://github.com/latencyzero/COVID/blob/logscale/vis.js#L675

• C3 version: 0.7.15
• D3 version: v5
• Browser: Safari
• OS: macOS

[JetForMe]

Oh! It's the bottom padding! That's being adjusted by log scale, too, it seems. If I set the padding to 0, the chart looks reasonable. Set it to 1 and it gets a huge gap. Set it to 20 and the gap is nearly half the graph.

Unfortunately, I see no way to set the padding via the API, nor is there a way to set the ticks, which would be nice when switching between linear and log types, because the default ticks aren't great.

[ghost]

This is the prettiest I can get my semi-log charts to come out. The issue I have is the scaling. You can see the distance on the scale between .1,1,10,100 is all proportionately equal. but the distance between .1 and .01 is tiny comparatively.

Here is the code javascript

  bindto: '#chart',

  data: {
    x: 'x',
    columns: [
      ['x', 'Apr-20-2020', 'biotch'],
      ['Corrects', .8, .08],
      ['Incorrects', 10, 20],
    ]
  },
  labels: {
    show: true,
    format: {
      data1: function(d, id) {
        console.log(id, Math.pow(10, d));
        return Math.pow(10, d).toFixed(0);
      }
    }
  },

  point: {
    r: 2,
    focus: {
      expand: {
        r: 5
      }
    }
  },
  axis: {
    x: {
      height: 60,
      type: 'categories',

      tick: {
        centered: true,
        outer: false,
        rotate: -45,
        multiline: false,
        culling: {
          max: 10 // the number of tick texts will be adjusted to less than this value
        },
      },
      padding: {
        left: 0,
        right: 0,
      }
    },
    y: {
      min: .01,
      max: 100,
      tick: {
        values: [.01, .1, .2, .3, .4, .5, 1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100]
      },
      type: 'log',

      padding: 0,
      label: {
        text: 'Rate per minute',
        position: 'outer-middle'
      }
    }
  },
  legend: {
    show: false
  },
  tooltip: {
    format: {
      name(name, ratio, id, index) {
        return name;
      },
      value(value, ratio, id, index) {
        return value + ' per minute';
      }
    },
    grouped: false,
    position: (data, width, height, element) => {
      if (data[0].id === 'Corrects') { // <- change this value to suit your needs
        return {
          top: 40,
          left: 0
        };
      }
      return {
        top: 80,
        left: 0
      };
    }
  },
});

the CSS

  body {
    height: 100%;
    margin: 0;
  }

  div {
    height: 90%;
    width: 100%;
  }

  p {
    text-align: center;
  }

  #chart .c3-circles-trendLine {
    display: none;
  }

  .c3-line-trendLine {
    stroke-dasharray: 5, 5;
  }

  .c3-axis .tick line {
    display: none;
  }

  .chart {
    width: 100%;
    height: 100%;
  }

  .c3-axis-y text {
    font-size: 8px;
  
  /* change the size of the fonts */
  }

  .c3-axis-x text {
    font-size: 10px;
    
    /* change the size of the fonts */
  }

[ghost]

I have addressed my issue by moving to ChartJS

https://github.com/jaredgib/jaredgib.github.io/blob/master/ChartJS.html