Mixed Line and Range Chart

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/NWHNE0NY

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      width: 100%;
      height: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let tmax = [87, 86, 89, 86, 87, 83, 87, 85, 78, 89, 88, 83, 90, 85, 93, 86, 87, 90, 86, 84, 99, 99, 87, 76, 84, 85, 85, 82, 87, 89, 87];
    let tmin = [69, 65, 67, 72, 70, 72, 75, 70, 68, 68, 70, 71, 73, 71, 73, 69, 70, 73, 71, 71, 78, 80, 73, 67, 65, 67, 67, 70, 71, 72, 75];
    let tavg = [78, 76, 77, 79, 79, 78, 80, 78, 75, 79, 79, 77, 82, 78, 83, 78, 79, 82, 79, 78, 89, 90, 80, 72, 75, 76, 76, 76, 79, 81, 81];
    let markerRange = [];

    for (let n = 0; n < tavg.length; n++) {
      markerRange.push([tmin[n], tmax[n]]); // Push the [min, max] for each index
    }

    let chartConfig = {
      type: 'mixed',
      theme: 'classic',
      globals: {
        fontFamily: 'Helvetica'
      },
      backgroundColor: 'white',
      utc: true,
      title: {
        text: 'Temperature Range at JFK International (July 2019)',
        backgroundColor: '#7CB5EC'
      },
      plot: {
        tooltip: {
          visible: false
        },
        dataMax: [87, 86, 89, 86, 87, 83, 87, 85, 78, 89, 88, 83, 90, 85, 93, 86, 87, 90, 86, 84, 99, 99, 87, 76, 84, 85, 85, 82, 87, 89, 87],
        dataMin: [69, 65, 67, 72, 70, 72, 75, 70, 68, 68, 70, 71, 73, 71, 73, 69, 70, 73, 71, 71, 78, 80, 73, 67, 65, 67, 67, 70, 71, 72, 75]
      },
      scaleX: {
        item: {
          color: '#2D2D2D'
        },
        lineColor: '#2D2D2D',
        lineWidth: '1px',
        minValue: 1561853782000,
        step: 'day',
        tick: {
          lineColor: '#2D2D2D',
          lineWidth: '1px'
        },
        transform: {
          type: 'date',
          all: '%m/%d/%y'
        }
      },
      scaleY: {
        values: '55:105:5',
        format: '%v°',
        item: {
          color: '#2D2D2D'
        },
        label: {
          text: 'Degrees (Fahrenheit)',
          color: '#2D2D2D',
          fontWeight: 'none'
        },
        lineColor: '#2D2D2D',
        lineWidth: '1px',
        tick: {
          lineColor: '#2D2D2D',
          lineWidth: '1px'
        }
      },
      crosshairX: {
        plotLabel: {
          text: '<span style=\'color:#7CB5EC;font-weight:bold;\'>%kl</span>\n<span style=\'color:#7CB5EC;font-weight:bold;\'>Avg</span>: %v°\n<span style=\'color:#7CB5EC;font-weight:bold;\'>Range</span>: %data-min° - %data-max°',
          backgroundColor: 'white',
          borderRadius: '3px',
          multiple: false,
          transform: {
            type: 'date',
            all: '%D %M %m %Y'
          }
        },
        scaleLabel: {
          backgroundColor: '#7CB5EC',
          transform: {
            type: 'date',
            all: '%D %M %m %Y'
          }
        }
      },
      source: {
        text: 'Source: www.accuweather.com',
        color: '#2D2D2D',
        fontWeight: 'none'
      },
      series: [{
          type: 'line',
          values: tavg,
          lineColor: '#7CB5EC',
          lineWidth: '1px',
          marker: {
            backgroundColor: 'white',
            borderColor: '#7CB5EC',
            shadow: false,
            size: '3px'
          },
          shadow: false
        },
        {
          type: 'range',
          values: markerRange,
          tooltip: {
            visible: false
          },
          backgroundColor: '#D7E9F9',
          guideLabel: {
            visible: false
          },
          lineWidth: '0px',
          marker: {
            visible: false
          }
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart" class="chart--container">
			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
		</div>
	</body>
</html>

let tmax = [87, 86, 89, 86, 87, 83, 87, 85, 78, 89, 88, 83, 90, 85, 93, 86, 87, 90, 86, 84, 99, 99, 87, 76, 84, 85, 85, 82, 87, 89, 87];
let tmin = [69, 65, 67, 72, 70, 72, 75, 70, 68, 68, 70, 71, 73, 71, 73, 69, 70, 73, 71, 71, 78, 80, 73, 67, 65, 67, 67, 70, 71, 72, 75];
let tavg = [78, 76, 77, 79, 79, 78, 80, 78, 75, 79, 79, 77, 82, 78, 83, 78, 79, 82, 79, 78, 89, 90, 80, 72, 75, 76, 76, 76, 79, 81, 81];
let markerRange = [];
 
for (let n = 0; n < tavg.length; n++) {
  markerRange.push([tmin[n], tmax[n]]); // Push the [min, max] for each index
}
 
let chartConfig = {
  type: 'mixed',
  theme: 'classic',
  globals: {
    fontFamily: 'Helvetica'
  },
  backgroundColor: 'white',
  utc: true,
  title: {
    text: 'Temperature Range at JFK International (July 2019)',
    backgroundColor: '#7CB5EC'
  },
  plot: {
    tooltip: {
      visible: false
    },
    dataMax: [87, 86, 89, 86, 87, 83, 87, 85, 78, 89, 88, 83, 90, 85, 93, 86, 87, 90, 86, 84, 99, 99, 87, 76, 84, 85, 85, 82, 87, 89, 87],
    dataMin: [69, 65, 67, 72, 70, 72, 75, 70, 68, 68, 70, 71, 73, 71, 73, 69, 70, 73, 71, 71, 78, 80, 73, 67, 65, 67, 67, 70, 71, 72, 75]
  },
  scaleX: {
    item: {
      color: '#2D2D2D'
    },
    lineColor: '#2D2D2D',
    lineWidth: '1px',
    minValue: 1561853782000,
    step: 'day',
    tick: {
      lineColor: '#2D2D2D',
      lineWidth: '1px'
    },
    transform: {
      type: 'date',
      all: '%m/%d/%y'
    }
  },
  scaleY: {
    values: '55:105:5',
    format: '%v°',
    item: {
      color: '#2D2D2D'
    },
    label: {
      text: 'Degrees (Fahrenheit)',
      color: '#2D2D2D',
      fontWeight: 'none'
    },
    lineColor: '#2D2D2D',
    lineWidth: '1px',
    tick: {
      lineColor: '#2D2D2D',
      lineWidth: '1px'
    }
  },
  crosshairX: {
    plotLabel: {
      text: '<span style=\'color:#7CB5EC;font-weight:bold;\'>%kl</span>\n<span style=\'color:#7CB5EC;font-weight:bold;\'>Avg</span>: %v°\n<span style=\'color:#7CB5EC;font-weight:bold;\'>Range</span>: %data-min° - %data-max°',
      backgroundColor: 'white',
      borderRadius: '3px',
      multiple: false,
      transform: {
        type: 'date',
        all: '%D %M %m %Y'
      }
    },
    scaleLabel: {
      backgroundColor: '#7CB5EC',
      transform: {
        type: 'date',
        all: '%D %M %m %Y'
      }
    }
  },
  source: {
    text: 'Source: www.accuweather.com',
    color: '#2D2D2D',
    fontWeight: 'none'
  },
  series: [
    {
      type: 'line',
      values: tavg,
      lineColor: '#7CB5EC',
      lineWidth: '1px',
      marker: {
        backgroundColor: 'white',
        borderColor: '#7CB5EC',
        shadow: false,
        size: '3px'
      },
      shadow: false
    },
    {
      type: 'range',
      values: markerRange,
      tooltip: {
        visible: false
      },
      backgroundColor: '#D7E9F9',
      guideLabel: {
        visible: false
      },
      lineWidth: '0px',
      marker: {
        visible: false
      }
    }
  ]
};
 
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});

.chart--container {
  width: 100%;
  height: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Bar Chart with JS Rules and Zooming 193/281 Linked Stacked Bar Chart

Mixed Line and Range Chart

Related Documentation: