I have a doughnut chart with static labels - what is changing, is only the data with values for labels. It's all about filtering data. But I have some weird issue and I can't figure out whats going on.
For example I've got something like this: labels with hidden option set to true I figure out that 'undefined' value in Array, makes item hidden so in case from picture it will be for example: [234, undefined, 21, undefined, 8].
Ok it's seems to be fine but when I use filter panel to change data in my application, and props with this Array of values is changing it's not rerendering label view, for example when I change array to [234, 100, 21, undefined, 8], label at position label1 should change 'hidden' property to false - it won't happening and I don't know why.
I paste here only render method, if u need to know something else please tell me:
render() {
const chartOptions = {
legend: {
display: true,
position: 'right',
labels: {
boxWidth: 12
}
}
};
const chartData =
[{
label: 'SomeLabel',
data: this.props.chartData.values,
yAxisId: 'yAxisA',
type: 'doughnut',
backgroundColor: ['#a3e1d4', '#dedede', '#9CC3DA', '#0475ad', '#f8ac59', '#ED5565', '#23c6c8', '#c2c2c2', '#1c84c6'],
}];
const title = (<h5>{this.props.title}</h5>);
const doughnutData = {
labels: this.props.chartData.labels,
datasets: chartData
};
const clonedDoughnutData = Object.assign({}, doughnutData);
const chart = (
<CustomDoughnut
data={clonedDoughnutData}
options={chartOptions}
height={150}
/>
);
const noData = (<NoData isDataVolume={false}/>);
const waveLoader = (<WaveLoader loading={this.props.loading}/>);
return (
<div>
<Tile
loading={this.props.overlayLoading}
title={title}
content={this.props.loading ? waveLoader : this.props.chartData.values.length > 0 ? chart : noData}
dynamicElementsService={this.props.dynamicElementsService}
parentView={this.props.parentView}
element={this.props.element}
status={this.props.status}
label={this.props.title}
/>
</div>
);
}
EDIT 1: All calculations I make in other component, then I'm dispatching them to store, and then I'm getting them from store in parent component and I'm sending values as a props to component with the chart rendering.
This is how I'm handling proper values to labels:
const SomethingValues = [];
this.somethingLabels.forEach(element => {
if (analytics.chartData.Something.Map.get(element)) {
somethingValues.push(analytics.chartData.Something.Map.get(element));
} else {
somethingValues.push(undefined);
}
}
);