[Chartjs]-How to start line series from start of y axis in bar chart – chart.js

by

1👍

✅

I’m not 100% sure if this works for your specific chart, that said you could simply set the min and max values from the x axes. (For more details here is the link to the documentation).

Like in this example:

/** DEMO TESTDATA START **/
const labels = [
    'w01/22', 'w02/22', 'w03/22', 'w04/22', 
    'w05/22', 'w06/22', 'w07/22', 'w08/22', 
    'w09/22', 'w10/22', 'w11/22'
];

const clampedLabels = labels.slice(1, labels.length -2)
const dataSet1 = [50, 40, 10, 100, 90 ,60, 20, 10, 100, 90, 90];
const dataSet2 = [... dataSet1]
    .map( (n,i) =>  {
      return {y: n, x: labels[i]}
    })
    .filter((n,i) => i % 2 == 0);
    
/** DEMO TESTDATA END **/

const data = {
  labels: labels,
  datasets: [{
      label: 'Bar Chart',
      data: dataSet1,
      backgroundColor: '#0000ff',
      order: 1
    }, {
      label: 'Line Chart',
      data: dataSet2,
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      type: 'line',
      order: 0
    }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
      responsive: true,
      plugins: {
          legend: {
              position: 'top',
          },
          title: {
              text: 'Unclamped',
              display: true
          }
      }
  }
};



const data2 = {
  labels: labels,
  datasets: [{
      label: 'Bar Chart',
      data: dataSet1,
      backgroundColor: '#0000ff',
      order: 1,
      fill: false,
    }, {
      label: 'Line Chart',
      data: dataSet2,
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      type: 'line',
    }]
};

const config2 = {
    type: 'bar',
    data: data2,
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                text: 'Clamped from W02/22 - W08/22',
                display: true,
            }
        },
        scales: {
            x: {
                min: clampedLabels[0],
                max: clampedLabels[clampedLabels.length-2],
            }
        }
    }
};

new Chart( document.getElementById('chart'), config );

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

0👍

Your requirement can be achieved by changing the minimum property value of the x-axis. Initially, we have rendered the chart like in the image. We can render the line chart from the start of the y-axis by setting the minimum value of the x-axis based on your requirement. We have created a simple angular application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-a3xvsv-2iblmd?file=app.component.ts

Code Snippet:

<button (click)="changeMinValue($event)">Change value</button>
                             <ejs-chart style='display:block;' #chart  [chartArea]='chartArea' [width]='width' align='center' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [zoomSettings]='zoom'
                                           [tooltip]='tooltip' (load)='load($event)'>
                                           <e-series-collection>
                                                          <e-series [dataSource]='data' fill="red" type='StackingColumn' xName='x' yName='y' width=2> </e-series>
                                                          <e-series [dataSource]='data' fill="yellow" type='StackingColumn' xName='x' yName='y1' width=2 > </e-series>
                                                          <e-series [dataSource]='data' fill="blue" type='StackingColumn' xName='x' yName='y2' width=2 > </e-series>
                                                          <e-series [dataSource]='data' fill="green" type='StackingColumn' xName='x' yName='y3' width=2 > </e-series>
                                                          <e-series [dataSource]='data1' fill="red" type='Line' xName='x' yName='y' width=3 [marker]='marker'> </e-series>
                                           </e-series-collection>
                             </ejs-chart>
              
              
public changeMinValue(e: Event): void {
        this.chart.primaryXAxis.minimum = 3;
        this.chart.refresh();
    }

Screenshot:

Initial rendering:

After clicking on the button:

Leave a comment