candlestick chart showing the price of ZRX/USD is normal, but ZRX/ETH is so wield

[helxsz]

I am using the techan to show the crypto price.

Here is the data chart for getting data from https://min-api.cryptocompare.com/data/histoday?fsym=ZRX&tsym=USD&limit=365

Here is the data graph for getting data from https://min-api.cryptocompare.com/data/histoday?fsym=ZRX&tsym=ETH&limit=365

Why the chart for USD looks fine but the chart for ETH looks so wired ? The chart code is nearly the same shown in the samples, except the loading data and parsing data is different.

I 'd like to show this in fiddle, but just don't know the way to show it correctly, so I just show the main code below.

`
setupSvg(){
const element = this.chartContainer.nativeElement;

    var margin = {top: 20, right: 40, bottom: 30, left: 40},
            width = element.offsetWidth  - margin.left - margin.right,
            height = 350 - margin.top - margin.bottom;

    var svg = d3.select(element).append('svg')
                   .attr('width', element.offsetWidth)
                   .attr('height', height+50)
                   .append("g")
                   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   //console.log(this.data);

    svg.append("g")
           .attr("class", "candlestick");

   svg.append("g")
           .attr("class", "x axis")
           .attr("transform", "translate(0," + height + ")");

   svg.append("g")
           .attr("class", "y axis")
           .append("text")
           .attr("transform", "rotate(-90)")
           .attr("y", 6)
           .attr("dy", ".71em")
           .style("text-anchor", "end")
           .text("Price ($)");

   svg.append('g')
           .attr("class", "crosshair ohlc");

   svg.append("g")
           .attr("class", "volume")
           .attr("clip-path", "url(#ohlcClip)");

   var ohlcSelection = svg.append("g")
     .attr("class", "ohlc")
     .attr("transform", "translate(0,0)");

     ohlcSelection.append("g")
             .attr("class", "indicator sma ma-0")
             .attr("clip-path", "url(#ohlcClip)");

   return {svg:svg, width:width, height:height };
}



candlestickdraw(dataset){

  var setup = this.setupSvg();
  var svg = setup.svg, width = setup.width, height = setup.height;


  var parsedate = d3.timeParse("%d-%b-%y %H:%M");
  //var parsedate = d3.timeParse("%d-%b-%y");
  var x = techan.scale.financetime()
          .range([0, width]);

  var y = d3.scaleLinear()
          .range([height, 0]);

  var candlestick = techan.plot.candlestick()
          .xScale(x)
          .yScale(y);

  var yVolume = d3.scaleLinear()
    .range([y(0), y(0.2)]);

  var volume = techan.plot.volume()
            .accessor(candlestick.accessor())   // Set the accessor to a ohlc accessor so we get highlighted bars
            .xScale(x)
            .yScale(yVolume);

  var xAxis = d3.axisBottom().scale(x);

  var yAxis = d3.axisLeft().scale(y);

  var sma0 = techan.plot.sma()
          .xScale(x)
          .yScale(y);

  var zoom = d3.zoom().on("zoom", zoomed);
  var zoomableInit;
  var timeAnnotation = techan.plot.axisannotation()
          .axis(xAxis)
          .orient('bottom')
          .format(d3.timeFormat('%Y-%m-%d'))
          .width(65)
          .translate([0, height]);

  var self = this;
  var ohlcAnnotation = techan.plot.axisannotation()
          .axis(yAxis)
          .orient('right')
          .format(d3.format(',.2f'))
          .translate([x(1), 0])

  var ohlcCrosshair = techan.plot.crosshair()
        .xScale(timeAnnotation.axis().scale())
        .yScale(ohlcAnnotation.axis().scale())
        .xAnnotation(timeAnnotation)
        .yAnnotation([ohlcAnnotation])
        .verticalWireRange([0, height]);

      var accessor = candlestick.accessor();

       dataset = dataset.map(function(d) {
            //console.log(parsedate(d.date));
           return {
               date:  parsedate(d.date),
               open: d.open,
               high: d.high,
               low: d.low,
               close: d.close,
               volume: d.volume
               //adjusted:d.adjusted
           };
       }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

       console.log(dataset);

       x.domain(dataset.map(candlestick.accessor().d));
       y.domain(techan.scale.plot.ohlc(dataset, candlestick.accessor()).domain());
       yVolume.domain(techan.scale.plot.volume(dataset).domain());


      draw(dataset);
      zoomableInit = x.zoomable().clamp(false).copy();


      function zoomed() {
         var rescaledY = d3.event.transform.rescaleY(y);
         yAxis.scale(rescaledY);
         candlestick.yScale(rescaledY);

         x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain());

         draw(dataset);
     }

     function draw(data) {

         svg.selectAll("g.candlestick").datum(data).call(candlestick);
         svg.selectAll("g.volume").datum(data).call(volume);
         svg.selectAll("g.crosshair.ohlc").call(ohlcCrosshair);

         svg.selectAll("g.x.axis").call(xAxis);
         svg.selectAll("g.y.axis").call(yAxis);

         svg.select("g.crosshair.ohlc").call(ohlcCrosshair).call(zoom);

     }`

There is another part of code loading the data and parsing the data.

`
this.mainService.getAggregatedOHLCData("ZRX","ETH",'1d')
var fsym = "ZRX", tsym="ETH",
this.http.get("https://min-api.cryptocompare.com/data/histoday?fsym="+fsym + "&tsym="+tsym + "&limit=365").map(res => res.json())
.subscribe((data) => {
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear().toString().substring(2, 4);
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes();
var sec = a.getSeconds();
var time;
let hourS, minS;
if( hour<10) hourS = '0'+hour; else hourS=''+hour;
if(min <10) minS = '0'+min; else minS = ''+min;
time = date + '-' + month + '-' + year + ' '+hourS+':'+minS;
return time;
}
let data2 = data.Data.map(function (d) {
return {
date: timeConverter(d.time*1000),
open: +d.open,
high: +d.high,
low: +d.low,
close: +d.close,
volume: +d.volumefrom
//adjusted:d.adjusted
};
})
console.log(data2);
self.candlestickdraw(data2);

  });`