0
165
ViewsNon-monotonic line chart
I've created a linechart in ExtJS but came accross an obstacle. I want to create a line chart that doesn't go to each next point in a Monotonic fashion. Let's say I have the following dataset:
let testData = [{
price: 500,
date: '01-01-2021'
}, {
price: 200,
date: '01-02-2021'
}, {
price: 1000,
date: '02-09-2021'
}];
When using this data in an ExtJS linechart it will create a diagonal line between the price of 200 and 1000, this data representation is incorrect since the price did not gradually rise in this time.
My question is: How can I achieve this using ExtJS charts?
Check the visual examples for the current and desirable result.
Please let me know if you need any extra information.
Monotonic (current result):
Non-monotonic (Desirable result)
·
Juan Pablo Isaza
1 answers
Answer question0
Have you tried curve property?
Ext.create({
xtype: 'cartesian',
renderTo: Ext.getBody(),
width: 600,
height: 400,
insetPadding: 40,
legend: {
docked: 'bottom',
},
store: {
fields: ['name', 'data1', 'data2'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 14
}, {
'name': 'metric two',
'data1': 7,
'data2': 16
}, {
'name': 'metric three',
'data1': 5,
'data2': 14
}, {
'name': 'metric four',
'data1': 2,
'data2': 6
}, {
'name': 'metric five',
'data1': 27,
'data2': 36
}]
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['data1'],
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['name'],
}],
colors: ['#ffff00', '#00ffff'],
series: [{
type: 'line',
xField: 'name',
yField: 'data1',
curve: {
type: 'step-after'
}
}, {
type: 'line',
fill: false,
xField: 'name',
yField: 'data2',
}]
});
·
Juan Pablo Isaza
Report
Answer question