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: