Here's my code I am passing the values in Y axis and X axis has the time. We need to show the time like 12PM, 1pm, 2pm one hour interval. But it showing exactly the time which is coming from api like 9:30am,9:35am.....? Please help.
initChart() {
this.lineChartData= [
{ data: this.PriceData, label: this.symbolName,lineTension: 0,fill:false },
];
this.lineChartLabels= this.TimeData;
this.lineChartOptions = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{
display: true,
type: 'time',
distribution: 'series',
gridLines: {
display: true
},
time: {
displayFormats: {
millisecond: 'h:mm:ss a',
second: 'h:mm:ss a',
minute: 'h:mm a',
hour: 'h a',
day: 'D MMM, h:mm a',
week: 'll',
month: 'll',
quarter: 'll',
year: 'll'
},
unit:"hour"
},
ticks: {
autoSkip: true,
maxTicksLimit: 15
}
}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
},
]
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
// Format of min pan range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max pan range depends on scale type
x: null,
y: null
},
// Function called once panning is completed
// Useful for dynamic data loading
onPan: function (e) { console.log(`I was panned!!!`, e); }
},
zoom: {
enabled: true,
drag: false,
// Drag-to-zoom rectangle style can be customized
// drag: {
// borderColor: 'rgba(225,225,225,0.3)'
// borderWidth: 5,
// backgroundColor: 'rgb(225,225,225)'
// },
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy',
rangeMin: {
// Format of min zoom range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max zoom range depends on scale type
x: null,
y: null
},
// Speed of zoom via mouse wheel
// (percentage of zoom on a wheel event)
speed: 0.1,
// Function called once zooming is completed
// Useful for dynamic data loading
onZoom: function ({ chart }) { console.log(`I was zoomed!!!`); }
}
};
this.lineChartColors= [
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{ // red
backgroundColor: 'rgba(255,0,0,0.3)',
borderColor: 'red',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
this.getIntervalData();
}
This is the result coming but x axis not showing as expected like below image
I have used chart js instead of ng2-charts, it's free and open source.
Follow the link https://www.chartjs.org/samples/latest/scales/time/financial.html
within the angular we can use easily. Please follow the below link
https://github.com/Binit-Star/AngularFinancialChart/blob/master/src/app/financial-chart/financial-chart.component.ts