Problem with decimals

[noroxi7]

HI, I need to use 5 decimals in a graph but its just appears 3(truncated) and the interpolation it's calculated with 3 decimal and the graph its just look weird. That's just happened when put it in y axis, because in x axis it's works
I compared the graph that i made with google sheets and the one in graph.js (the same data)
The graph with Google Sheet: https://mega.nz/file/1cYX3ShK#nMzZ33hhuURqNz6StoXavQZFjv7IovWAB1I0HvXngqk
The graph with Graph.js: https://mega.nz/file/RVJ3iQoK#QZhXoCUFP3pP4M0eKprkgJFEoDGngotgW1i8mEnzFFs
Script in html:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Here is the code .js:
var myChart9 = new Chart(ctx9, { type: 'line', data: { labels: tempTable, datasets: [{ type: "line", borderColor: "#3e95cd", data:humAbsoTable, fill: false, cubicInterpolationMode: 'monotone', tension: 0.4, },{ label: '', labels:[10], data: [,,,,,,,,,,,0.1], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, type:"scatter", stack: 'combined', }] }, options: { scales: { y: { beginAtZero: true, ticks:{ callback: (val) => (val.toExponential()), precision: 5 } }, x:{ ticks:{ maxTicksLimit:3 } } }, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Huemdad y Temperatura' } } } });

[kurkle]

For tooltip, you can customize the label with callbacks:

const formatter = new Intl.NumberFormat('en-US', {minimumFractionDigits: 5});
const myChart9 = new Chart(ctx9, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (item) => item.dataset.label + ': ' + formatter.format(item.parsed.y),
        }
      }
    }
  }
});

[noroxi7]

Thanks! @kurkle and you know how to set the values of x axis fixed like 20,40,60,80 even if there is more values between 0-20 than in 20-40?

[LeeLenaleee]

You can make use of the stepSize property in the ticks config part and set the min and max options in the root of the axis config to make it like you want: https://www.chartjs.org/docs/master/axes/cartesian/linear.html#tick-configuration

[kurkle]

For 'line' chart, the x-axis is a category scale by default. You'll probably want to change that.

const myChart9 = new Chart(ctx9, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }
});

[noroxi7]

Great but I solve the shape setting labels=[0,10,20,30,40] but if you see my code, I have a combined graph(line and scatter), how can I set one label for line and another one for scatter, I mean one for each dataset

[noroxi7]

@kurkle @LeeLenaleee

[LeeLenaleee]

You will need to use multiple axis see this example: https://www.chartjs.org/docs/master/samples/other-charts/scatter-multi-axis.html

[noroxi7]

@LeeLenaleee I mean labels its just one? Can I define two labels? One for scatter and another one for line
For example:
labelsScatter=[12]; lablesLine = [0,10,20,30,40,50];

[kurkle]

You can use [{x, y}] data format.
https://www.chartjs.org/docs/latest/general/data-structures.html