Chart labels and grid lines stop in the middle
zacko83 opened this issue · 2 comments
zacko83 commented
Trying to plot a financial chart with data from the S&P, I ran into a strange problem. The chart itself is plotted correctly. However on the x-axis only about half of the labels and the according grid lines are drawn:
I first used the sample code of the Angular 2 Charts Demo, which works perfectly. What makes the difference is the data used. Therefore I also added the data as JSON here.
Please note, there isn't a data point for each day. There are of course no quotes on weekends or holidays. When I fake the timestamp to be continuous, the x-axis labels and grid lines are drawn correctly. Also, taking a subset of the unaltered data, works just fine.
The code is pretty straight forward:
HTML:
<div class="chart">
<canvas
height="500"
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[legend]="false"
chartType="candlestick"
[plugins]="chartPlugins">
</canvas>
</div>The angular component:
import { Component, OnInit, ViewChild } from '@angular/core';
import 'lib/chartjs-chart-financial/chartjs-chart-financial.js';
import * as luxon from 'luxon';
import 'chartjs-adapter-luxon';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { BaseChartDirective, Color, Label } from 'ng2-charts';
import { dailyQuotes } from '../models/quote-info';
@Component({
selector: 'app-fin-chart',
templateUrl: './fin-chart.component.html',
styleUrls: ['./fin-chart.component.css']
})
export class FinChartComponent implements OnInit {
public chartData: ChartDataSets[] = [ { data: [] } ];
public chartLabels: Label[] = [];
public chartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false
};
public chartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,0,0,0.3)',
},
];
public chartPlugins = [];
@ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
constructor() { }
ngOnInit() {
let ohlc = dailyQuotes.map(q => {
let date = luxon.DateTime.fromISO(q.timestamp);
return {
t: date.valueOf(),
o: q.open,
h: q.high,
l: q.low,
c: q.close
}
});
this.chartData = [{ data: ohlc }];
}
}The data used as JSON:
export let dailyQuotes = [
{
"timestamp": "2019-09-16T00:00:00",
"open": 2996.4099,
"high": 3002.1899,
"low": 2990.6699,
"close": 2997.9600,
"volume": 4274640000
},
{
"timestamp": "2019-09-17T00:00:00",
"open": 2995.6699,
"high": 3006.2100,
"low": 2993.7300,
"close": 3005.7000,
"volume": 3671840000
},
{
"timestamp": "2019-09-18T00:00:00",
"open": 3001.5000,
"high": 3007.8301,
"low": 2978.5701,
"close": 3006.7300,
"volume": 3435540000
},
{
"timestamp": "2019-09-19T00:00:00",
"open": 3010.3601,
"high": 3021.9900,
"low": 3003.1599,
"close": 3006.7900,
"volume": 3251290000
},
{
"timestamp": "2019-09-20T00:00:00",
"open": 3008.4199,
"high": 3016.3701,
"low": 2984.6799,
"close": 2992.0701,
"volume": 6094740000
},
{
"timestamp": "2019-09-23T00:00:00",
"open": 2983.5000,
"high": 2999.1499,
"low": 2982.2300,
"close": 2991.7800,
"volume": 3186590000
},
{
"timestamp": "2019-09-24T00:00:00",
"open": 3002.4299,
"high": 3007.9800,
"low": 2957.7300,
"close": 2966.6001,
"volume": 3868160000
},
{
"timestamp": "2019-09-25T00:00:00",
"open": 2968.3501,
"high": 2989.8201,
"low": 2952.8601,
"close": 2984.8701,
"volume": 3318870000
},
{
"timestamp": "2019-09-26T00:00:00",
"open": 2985.7300,
"high": 2987.2800,
"low": 2963.7100,
"close": 2977.6201,
"volume": 3077240000
},
{
"timestamp": "2019-09-27T00:00:00",
"open": 2985.4700,
"high": 2987.3101,
"low": 2945.5300,
"close": 2961.7900,
"volume": 3243650000
},
{
"timestamp": "2019-09-30T00:00:00",
"open": 2967.0701,
"high": 2983.8501,
"low": 2967.0701,
"close": 2976.7400,
"volume": 3247610000
},
{
"timestamp": "2019-10-01T00:00:00",
"open": 2983.6899,
"high": 2992.5300,
"low": 2938.7000,
"close": 2940.2500,
"volume": 3558040000
},
{
"timestamp": "2019-10-02T00:00:00",
"open": 2924.7800,
"high": 2924.7800,
"low": 2874.9299,
"close": 2887.6101,
"volume": 3912520000
},
{
"timestamp": "2019-10-03T00:00:00",
"open": 2885.3799,
"high": 2911.1299,
"low": 2855.9399,
"close": 2910.6299,
"volume": 3503640000
},
{
"timestamp": "2019-10-04T00:00:00",
"open": 2918.5601,
"high": 2953.7400,
"low": 2918.5601,
"close": 2952.0100,
"volume": 2990830000
},
{
"timestamp": "2019-10-07T00:00:00",
"open": 2944.2300,
"high": 2959.7500,
"low": 2935.6799,
"close": 2938.7900,
"volume": 2940140000
},
{
"timestamp": "2019-10-08T00:00:00",
"open": 2920.3999,
"high": 2925.4700,
"low": 2892.6599,
"close": 2893.0601,
"volume": 3356450000
},
{
"timestamp": "2019-10-09T00:00:00",
"open": 2911.1001,
"high": 2929.3201,
"low": 2907.4099,
"close": 2919.3999,
"volume": 2726820000
},
{
"timestamp": "2019-10-10T00:00:00",
"open": 2918.5500,
"high": 2948.4600,
"low": 2917.1201,
"close": 2938.1299,
"volume": 3217250000
},
{
"timestamp": "2019-10-11T00:00:00",
"open": 2963.0701,
"high": 2993.2800,
"low": 2963.0701,
"close": 2970.2700,
"volume": 3580460000
},
{
"timestamp": "2019-10-14T00:00:00",
"open": 2965.8101,
"high": 2972.8401,
"low": 2962.9399,
"close": 2966.1499,
"volume": 2557020000
},
{
"timestamp": "2019-10-15T00:00:00",
"open": 2973.6101,
"high": 3003.2800,
"low": 2973.6101,
"close": 2995.6799,
"volume": 3340740000
},
{
"timestamp": "2019-10-16T00:00:00",
"open": 2989.6799,
"high": 2997.5400,
"low": 2985.2000,
"close": 2989.6899,
"volume": 3222570000
},
{
"timestamp": "2019-10-17T00:00:00",
"open": 3000.7700,
"high": 3008.2900,
"low": 2991.7900,
"close": 2997.9500,
"volume": 3115960000
},
{
"timestamp": "2019-10-18T00:00:00",
"open": 2996.8401,
"high": 3000.0000,
"low": 2976.3101,
"close": 2986.2000,
"volume": 3264290000
},
{
"timestamp": "2019-10-21T00:00:00",
"open": 2996.4800,
"high": 3007.3301,
"low": 2995.3501,
"close": 3006.7200,
"volume": 3271620000
},
{
"timestamp": "2019-10-22T00:00:00",
"open": 3010.7300,
"high": 3014.5701,
"low": 2995.0400,
"close": 2995.9900,
"volume": 3523890000
},
{
"timestamp": "2019-10-23T00:00:00",
"open": 2994.0100,
"high": 3004.7800,
"low": 2991.2100,
"close": 3004.5200,
"volume": 3392870000
},
{
"timestamp": "2019-10-24T00:00:00",
"open": 3014.7800,
"high": 3016.0701,
"low": 3000.4199,
"close": 3010.2900,
"volume": 3692600000
},
{
"timestamp": "2019-10-25T00:00:00",
"open": 3003.3201,
"high": 3027.3899,
"low": 3001.9399,
"close": 3022.5500,
"volume": 3370370000
},
{
"timestamp": "2019-10-28T00:00:00",
"open": 3032.1201,
"high": 3044.0801,
"low": 3032.1201,
"close": 3039.4199,
"volume": 3521230000
},
{
"timestamp": "2019-10-29T00:00:00",
"open": 3035.3899,
"high": 3047.8701,
"low": 3034.8101,
"close": 3036.8899,
"volume": 3589930000
},
{
"timestamp": "2019-10-30T00:00:00",
"open": 3039.7400,
"high": 3050.1001,
"low": 3025.9600,
"close": 3046.7700,
"volume": 3776030000
},
{
"timestamp": "2019-10-31T00:00:00",
"open": 3046.8999,
"high": 3046.8999,
"low": 3023.1899,
"close": 3037.5601,
"volume": 4139280000
},
{
"timestamp": "2019-11-01T00:00:00",
"open": 3050.7200,
"high": 3066.9500,
"low": 3050.7200,
"close": 3066.9099,
"volume": 3930200000
},
{
"timestamp": "2019-11-04T00:00:00",
"open": 3078.9600,
"high": 3085.2000,
"low": 3074.8701,
"close": 3078.2700,
"volume": 4146850000
},
{
"timestamp": "2019-11-05T00:00:00",
"open": 3080.8000,
"high": 3083.9500,
"low": 3072.1499,
"close": 3074.6201,
"volume": 4486130000
},
{
"timestamp": "2019-11-06T00:00:00",
"open": 3075.1001,
"high": 3078.3401,
"low": 3065.8899,
"close": 3076.7800,
"volume": 4458190000
},
{
"timestamp": "2019-11-07T00:00:00",
"open": 3087.0200,
"high": 3097.7700,
"low": 3080.2300,
"close": 3085.1799,
"volume": 4144640000
},
{
"timestamp": "2019-11-08T00:00:00",
"open": 3081.2500,
"high": 3093.0901,
"low": 3073.5801,
"close": 3093.0801,
"volume": 3499150000
},
{
"timestamp": "2019-11-11T00:00:00",
"open": 3080.3301,
"high": 3088.3301,
"low": 3075.8201,
"close": 3087.0100,
"volume": 3035530000
},
{
"timestamp": "2019-11-12T00:00:00",
"open": 3089.2800,
"high": 3102.6101,
"low": 3084.7300,
"close": 3091.8401,
"volume": 3466010000
},
{
"timestamp": "2019-11-13T00:00:00",
"open": 3084.1799,
"high": 3098.0601,
"low": 3078.8000,
"close": 3094.0400,
"volume": 3509280000
},
{
"timestamp": "2019-11-14T00:00:00",
"open": 3090.7500,
"high": 3098.2000,
"low": 3083.2600,
"close": 3096.6299,
"volume": 3276070000
},
{
"timestamp": "2019-11-15T00:00:00",
"open": 3107.9199,
"high": 3120.4600,
"low": 3104.6001,
"close": 3120.4600,
"volume": 3335650000
},
{
"timestamp": "2019-11-18T00:00:00",
"open": 3117.9099,
"high": 3124.1699,
"low": 3112.0601,
"close": 3122.0300,
"volume": 3436690000
},
{
"timestamp": "2019-11-19T00:00:00",
"open": 3127.4500,
"high": 3127.6399,
"low": 3113.4700,
"close": 3120.1799,
"volume": 3590070000
},
{
"timestamp": "2019-11-20T00:00:00",
"open": 3114.6599,
"high": 3118.9700,
"low": 3091.4099,
"close": 3108.4600,
"volume": 4034890000
},
{
"timestamp": "2019-11-21T00:00:00",
"open": 3108.4900,
"high": 3110.1101,
"low": 3094.5500,
"close": 3103.5400,
"volume": 3720560000
},
{
"timestamp": "2019-11-22T00:00:00",
"open": 3111.4099,
"high": 3112.8701,
"low": 3099.2600,
"close": 3110.2900,
"volume": 3226780000
},
{
"timestamp": "2019-11-25T00:00:00",
"open": 3117.4399,
"high": 3133.8301,
"low": 3117.4399,
"close": 3133.6399,
"volume": 3511530000
},
{
"timestamp": "2019-11-26T00:00:00",
"open": 3134.8501,
"high": 3142.6899,
"low": 3131.0000,
"close": 3140.5200,
"volume": 4595590000
},
{
"timestamp": "2019-11-27T00:00:00",
"open": 3145.4900,
"high": 3154.2600,
"low": 3143.4099,
"close": 3153.6299,
"volume": 3033090000
},
{
"timestamp": "2019-11-29T00:00:00",
"open": 3147.1799,
"high": 3150.3000,
"low": 3139.3401,
"close": 3140.9800,
"volume": 1743020000
},
{
"timestamp": "2019-12-02T00:00:00",
"open": 3143.8501,
"high": 3144.3101,
"low": 3110.7800,
"close": 3113.8701,
"volume": 3268740000
},
{
"timestamp": "2019-12-03T00:00:00",
"open": 3087.4099,
"high": 3094.9700,
"low": 3070.3301,
"close": 3093.2000,
"volume": 3653390000
},
{
"timestamp": "2019-12-04T00:00:00",
"open": 3103.5000,
"high": 3119.3799,
"low": 3102.5300,
"close": 3112.7600,
"volume": 3695030000
},
{
"timestamp": "2019-12-05T00:00:00",
"open": 3119.2100,
"high": 3119.4500,
"low": 3103.7600,
"close": 3117.4299,
"volume": 3355750000
},
{
"timestamp": "2019-12-06T00:00:00",
"open": 3134.6201,
"high": 3150.6001,
"low": 3134.6201,
"close": 3145.9099,
"volume": 3479480000
},
{
"timestamp": "2019-12-09T00:00:00",
"open": 3141.8601,
"high": 3148.8701,
"low": 3135.4600,
"close": 3135.9600,
"volume": 3345990000
},
{
"timestamp": "2019-12-10T00:00:00",
"open": 3135.3601,
"high": 3142.1201,
"low": 3126.0901,
"close": 3132.5200,
"volume": 3343790000
},
{
"timestamp": "2019-12-11T00:00:00",
"open": 3135.7500,
"high": 3143.9800,
"low": 3133.2100,
"close": 3141.6299,
"volume": 3252540000
},
{
"timestamp": "2019-12-12T00:00:00",
"open": 3141.2300,
"high": 3176.2800,
"low": 3138.4700,
"close": 3168.5701,
"volume": 3990690000
},
{
"timestamp": "2019-12-13T00:00:00",
"open": 3166.6499,
"high": 3182.6799,
"low": 3156.5100,
"close": 3168.8000,
"volume": 3736870000
},
{
"timestamp": "2019-12-16T00:00:00",
"open": 3183.6299,
"high": 3197.7100,
"low": 3183.6299,
"close": 3191.4500,
"volume": 4051790000
},
{
"timestamp": "2019-12-17T00:00:00",
"open": 3195.3999,
"high": 3198.2200,
"low": 3191.0300,
"close": 3192.5200,
"volume": 3837540000
},
{
"timestamp": "2019-12-18T00:00:00",
"open": 3195.2100,
"high": 3198.4800,
"low": 3191.1399,
"close": 3191.1399,
"volume": 4014080000
},
{
"timestamp": "2019-12-19T00:00:00",
"open": 3192.3201,
"high": 3205.4800,
"low": 3192.3201,
"close": 3205.3701,
"volume": 3720450000
},
{
"timestamp": "2019-12-20T00:00:00",
"open": 3223.3301,
"high": 3225.6499,
"low": 3216.0300,
"close": 3221.2200,
"volume": 6454270000
},
{
"timestamp": "2019-12-23T00:00:00",
"open": 3226.0500,
"high": 3227.7800,
"low": 3222.3000,
"close": 3224.0100,
"volume": 3060610000
},
{
"timestamp": "2019-12-24T00:00:00",
"open": 3225.4500,
"high": 3226.4299,
"low": 3220.5100,
"close": 3223.3799,
"volume": 1296540000
},
{
"timestamp": "2019-12-26T00:00:00",
"open": 3227.2000,
"high": 3240.0801,
"low": 3227.2000,
"close": 3239.9099,
"volume": 2160680000
},
{
"timestamp": "2019-12-27T00:00:00",
"open": 3247.2300,
"high": 3247.9299,
"low": 3234.3701,
"close": 3240.0200,
"volume": 2428670000
},
{
"timestamp": "2019-12-30T00:00:00",
"open": 3240.0901,
"high": 3240.9199,
"low": 3216.5701,
"close": 3221.2900,
"volume": 3013290000
},
{
"timestamp": "2019-12-31T00:00:00",
"open": 3215.1799,
"high": 3231.7200,
"low": 3212.0300,
"close": 3230.7800,
"volume": 2893810000
},
{
"timestamp": "2020-01-02T00:00:00",
"open": 3244.6699,
"high": 3258.1399,
"low": 3235.5300,
"close": 3257.8501,
"volume": 3458250000
},
{
"timestamp": "2020-01-03T00:00:00",
"open": 3226.3601,
"high": 3246.1499,
"low": 3222.3401,
"close": 3234.8501,
"volume": 3461290000
},
{
"timestamp": "2020-01-06T00:00:00",
"open": 3217.5500,
"high": 3246.8401,
"low": 3214.6399,
"close": 3246.2800,
"volume": 3674070000
},
{
"timestamp": "2020-01-07T00:00:00",
"open": 3241.8601,
"high": 3244.9099,
"low": 3232.4299,
"close": 3237.1799,
"volume": 3420380000
},
{
"timestamp": "2020-01-08T00:00:00",
"open": 3238.5901,
"high": 3267.0701,
"low": 3236.6699,
"close": 3253.0500,
"volume": 3720890000
},
{
"timestamp": "2020-01-09T00:00:00",
"open": 3266.0300,
"high": 3275.5801,
"low": 3263.6699,
"close": 3274.7000,
"volume": 3638390000
},
{
"timestamp": "2020-01-10T00:00:00",
"open": 3281.8101,
"high": 3282.9900,
"low": 3260.8601,
"close": 3265.3501,
"volume": 3212970000
},
{
"timestamp": "2020-01-13T00:00:00",
"open": 3271.1299,
"high": 3288.1299,
"low": 3268.4299,
"close": 3288.1299,
"volume": 3456380000
},
{
"timestamp": "2020-01-14T00:00:00",
"open": 3285.3501,
"high": 3287.8501,
"low": 3278.9199,
"close": 3287.8501,
"volume": 620683985
}
]benmccann commented
I'm afraid I don't have much time to look at reports and it's not clear the issue is in this library. Please either file this bug with ng2-charts or reproduce it without the angular code. If you look at the demo for this library it does skip weekends, so that shouldn't be an issue. It sounds like perhaps the ng2-charts wrapper is doing something weird, but I'm not going to learn angular and spend time figuring out what's going on here
zacko83 commented
You're absolutely right. I just repeated my tests with plain JS and it worked as expected.
I will open the issue on ng2-charts.
Thanks for the help.