score: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>

score:6

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.


Related Query

More Query from same tag