search

mauriciopoppe / function-plot

A 2d function plotter for the web
https://mauriciopoppe.github.io/function-plot/
MIT License
926 stars 113 forks source link

X-axis tick labels are getting cut off when font size is changed #296

Closed VotusX closed 4 months ago

VotusX commented 4 months ago

Hey there,

I encountered a problem where the tick labels of the x-axis are cut off when I change their font size. I have tried various ways but I wasn't able to resolve it. Below I attached a screenshot and my code.

Any help would be greatly appreaciated! Best regards

<html>
<div id="wrapper"></div>
<style>
    .function-plot text {
      font-size: 30px;
      font-family: "Charter", sans-serif;
    }
    .function-plot path.line {
      stroke-width: 5;
    }
</style>
<script src="https://unpkg.com/function-plot@1.22.2/dist/function-plot.js"></script>
<script type="module">
    functionPlot({
        target: '#wrapper',
        grid: true,
        width: window.innerWidth,
        height: window.innerHeight,
        data: [{ fn: 'x^2', graphType: 'polyline', color: 'orange' }]
    })
</script>
</html>

ticksarecutoff

mauriciopoppe commented 4 months ago

The axis are draw by the d3-axis library, it has a setter to control the padding, you can do the following:

    const options = {
        target: '#playground',
        grid: true,
        width: window.innerWidth,
        height: window.innerHeight,
        data: [{ fn: 'x^2', graphType: 'polyline', color: 'orange' }]
    }
    // initial render
    const instance = functionPlot(options)

    // instance.meta.xAxis was created by the initial call, we can update the padding
    instance.meta.xAxis.tickPadding(-5)

    // redraw graph
    functionPlot(options)