NativeScript / nativescript-ui-charts

NativeScript wrapper around HiCharts library
Apache License 2.0
26 stars 6 forks source link

Chart breaks when updating series[x].index value on a column chart #8

Closed cjohn001 closed 3 years ago

cjohn001 commented 3 years ago

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

Please, tell us how to recreate the issue in as much detail as possible.

When setting the series[x].index values on a column chart, the chart visualization breaks on a refresh of the chart data. Hence, when the chart (example attached below) is set for the first time, the chart displays as expected. However, when updating the graph ( even with exactly the same data), i.e.

this.chartOptions = Object.assign({}, cOpts);

the chart visualization breaks.

Is there any code involved?

{ chart: { backgroundColor: 'rgba(0,0,0,0)', animation: false, marginTop: 17, marginBottom: 41, marginLeft: 17, marginRight: 0, borderWidth: 0, plotBorderWidth: 0, type: 'column', colors: ['#85bb2f', '#37597c', '#e63e11'], options3d: { enabled: true, alpha: 8, beta: 2, viewDistance: 15, depth: 40 } }, legend: { layout: 'horizontal', align: 'center', verticalAlign: 'top', x: 0, y: -7, floating: false, enabled: true, itemStyle: { color: '#414141', fontSize: '12px', fontWeight: 'normal' } }, exporting: { enabled: false }, credits: { enabled: false }, title: { text: '' }, xAxis: { type: 'datetime', skew3d: true, labels: { enabled: true, rotation: -35 }, style: { fontSize: '12px' }, dateTimeLabelFormats: { day: '%e. %b' }, tickInterval: 24 3600 1000, // one day gridLineWidth: 0 }, yAxis: { allowDecimals: false, min: 0, minRange: 1000, gridLineWidth: 0, labels: { enabled: false }, title: { align: 'middle', text: 'kcal', rotation: 0, y: 0 }, stackLabels: { skew3d: true, enabled: true, useHTML: true, formatter: function () { return '' + this.total + ''; } } }, plotOptions: { enableMouseTracking: false, column: { stacking: 'normal', depth: 40 } }, series: [ { name: 'Calories', stack: 's', data: [], pointStart: Date.UTC(2010, 0, 1), pointInterval: 24 3600 1000, // one day dataLabels: { enabled: false }, color: '#85bb2f', index: 1, legendIndex: 0 }, { name: 'Above Goal', data: [], stack: 's', pointStart: Date.UTC(2010, 0, 1), pointInterval: 24 3600 1000, // one day dataLabels: { enabled: false }, color: '#e63e11', index: 0, legendIndex: 1 } ] };

cjohn001 commented 3 years ago

refreshing works with new version