Which chart type should i choose to show change in values between 2 dates? - charts

Question

I am using Highcharts, but my question is in general. I want to know which chart is a perfect match to show change in values between 2 dates.
E.g The lending rate e.g
29-Aug : 21.2
30-Aug : 21.3
The change is 0.1 million.
Which chart type should i choose to show this little difference clearly noticeable .?

Answer 1

If you're comparing two dates/values, I would recommend using a bar chart. (If you're comparing values over months or years, I would suggest using a line or area chart.) You can better emphasize the difference between the two lending rate values by specifying the minimum, maximum, and step scale values so that the 0.1 million difference can be clearly illustrated. See the below demo:
var myConfig = {
type: 'bar',
title: {
text: 'Lending Rate',
fontFamily: 'Georgia'
},
utc: true,
timezone: 0,
scaleX: {
transform: {
type: 'date',
all: '%M %d, %Y'
},
step: 86400000,
item: {
fontSize: 10
}
},
scaleY: {
values: '21.1:21.4:0.1',
format: '%vM',
decimals: 1,
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
plot: {
barWidth: '50%',
borderWidth: 1,
borderColor: 'gray',
backgroundColor: '#99ccff',
valueBox: {
text: '%v million',
fontSize: 12,
fontColor: 'gray',
fontWeight: 'normal'
},
tooltip: {
text: '%v million'
}
},
series: [
{
values: [
[1472428800000, 21.2],
[1472515200000, 21.3],
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>
For more on scale customization and formatting, see this X/Y-Axis Scales Tutorial. The value boxes and tooltips can also be used to provide further information about the node values.
Hope that helps. I'm a member of the ZingChart team, and happy to answer further questions.

Answer 2

A simple bar chart with data labels to indicate the respective values would be helpful to show users there is a very small change in value.
See the code snippet below. I modified one of the basic Highcharts demos for a bar chart with your example values.
I hope this is helpful for you!
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
title: { text: 'Sample Chart' },
xAxis: {
categories: ['29-Aug','30-Aug'],
title: { text: null }
},
yAxis: { min: 0 },
tooltip: { valueSuffix: ' million' },
plotOptions: {
bar: {
dataLabels: {
crop: false,
overflow: 'none',
enabled: true,
style: { fontSize: '18px' }
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
name: 'Sample Series',
data: [21.2,21.3]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>