Candlesticks - Edge Cases

Standard Candlestick and derived Candle charts, with 7th point with the same open, close, high and low values. And the 11th point with same open and close values. This happens when <strong>Edge Cases</strong> is ON, as it is by default in this template.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
    <div id="err_msg"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }
#err_msg {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    padding: 2px;
    margin: 0;
    border: none;
    background: rgb(192, 0, 0);
    color: white;
    font-size: 0.8em;
    font-family: Arial, sans-serif;
    z-index: 1001;
}

JavaScript

window.onerror = function (msg, url, linenumber) {
   $("#chart_div").css("background-image", "none");
   $("#err_msg").text("??? [Line " + linenumber + "] " + msg);
   $("#err_msg").show();
   return true;
};
var chart;
var options;
var colorPalette;
$(function () {
   colorPalette = ["#007c9c", "#019fcc", "#8fcd3e", "#82b93a", "#638a2d"];
   options = {
      size: {
         width: "300",
         height: "185"
      },
      load: "onLoad",
      loaded: "afterLoaded",
      chartMouseMove: "afterLoaded",
      palette: colorPalette,
      isResponsive: true,
      enableRotation: false,
      margin: {
         left: 0,
         right: 5,
         top: 0,
         bottom: 0
      },
      title: {
},
      legend: {
         visible: false,
      },
      chartArea: {
         border: {
            color: 'transparent',
            opacity: 1,
         },
      },
      primaryXAxis: {
         visible: true,
         stripLine: [{
            visible: false
         }],
         title: {
            font: {
               fontFamily: "Arial",
               size: "8px",
               fontWeight: "bold",
               color: "#000000",
            },
         },
         axisLine: {
            visible: false
         },
         majorGridLines: {
            width: 0
         },
         minorGridLines: {
            width: 0
         },
         font: {
            color: "transparent"
         },
         majorTickLines: {
            visible: false
         },
         minorTickLines: {
            visible: false
         },
      },
      primaryYAxis: {
         visible: true,
         stripLine: [{
            visible: false
         }],
         title: {
            font: {
               fontFamily: "Arial",
               size: "8px",
               fontWeight: "bold",
               color: "#000000",
            },
         },
         axisLine: {
            visible: false
         },
         majorGridLines: {
            width: 0
         },
...