[Chartjs]-Change baseline value in chartjs from 0 to for example 50

by

1👍

✅

Yes, there is {fill: {value:<value>}}.
(here is the link to the documentation)

Here a short demo, how I would do this:

const data = {
    labels: ['E-commerce', 'Enterprise', 'Grey'], 
    datasets: [{
        label: 'random  testdata',
        data: [12, 19, 5, 3, 3], 
        fill: {value: 12},     
     }],
};

const config = {
    type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
    }
};

new Chart(
    document.getElementById('chart'),
    config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  
<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

0👍

I should use the fill option, passing the value you want to have as base.

See documentation: https://www.chartjs.org/docs/latest/charts/area.html

In your use case, fill: {value: 50}

const config = {
  type: 'line',
  data: {
    labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      data: [50, 35, 45, 47, 21, 13, 27],
      fill: {value: 20}
     }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: false,
    }
  },
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, config);
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600px" height="400px"/>
    </div>
  </body>
</html>

Leave a comment