Gallery Back to Gallery

Stacked Area with Crosshair

Powered by ZingChart
<!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 {
      height: 100%;
      width: 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 chartConfig = {
      type: 'area',
      title: {
        text: 'Monthly Apparel Sales',
        adjustLayout: true,
        fontColor: '#424242',
        marginTop: '15px',
      },
      subtitle: {
        text: 'In thousands (k)',
        adjustLayout: true,
        fontColor: '#616161',
        marginTop: '45px',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        alphaArea: 0.6,
        aspect: 'spline',
        stacked: true,
      },
      plotarea: {
        margin: 'dynamic',
      },
      scaleX: {
        item: {
          fontColor: '#616161',
          paddingTop: '5px',
        },
        label: {
          fontColor: '#616161',
          text: '2019',
        },
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
        lineColor: '#AAA5A5',
        tick: {
          lineColor: '#AAA5A5',
        },
      },
      scaleY: {
        guide: {
          lineColor: '#AAA5A5',
          lineStyle: 'dotted',
        },
        item: {
          fontColor: '#616161',
          paddingRight: '5px',
        },
        label: {
          fontColor: '#616161',
          text: 'Quantity',
        },
        lineColor: '#AAA5A5',
        short: true,
        shortUnit: 'k',
        tick: {
          lineColor: '#AAA5A5',
        },
      },
      crosshairX: {
        lineColor: '#AAA5A5',
        plotLabel: {
          backgroundColor: '#EBEBEC',
          borderColor: '#AAA5A5',
          borderRadius: '2px',
          borderWidth: '2px',
          fontColor: '#616161',
          thousandsSeparator: ',',
        },
        scaleLabel: {
          backgroundColor: '#EBEBEC',
          borderColor: '#AAA5A5',
          fontColor: '#424242',
        },
      },
      series: [{
          text: 'Footware',
          values: [3435, 4212, 1627, 3189, 2325, 1334, 1567, 2685],
          backgroundColor: '#4CAF50',
          lineColor: '#4CAF50',
          marker: {
            backgroundColor: '#4CAF50',
            borderColor: '#4CAF50',
          },
        },
        {
          text: 'Accessories',
          values: [2221, 3535, 4340, 2232, 4212, 1259, 3611, 4230],
          backgroundColor: '#E53935',
          lineColor: '#E53935',
          marker: {
            backgroundColor: '#E53935',
            borderColor: '#E53935',
          },
        },
        {
          text: 'Pants/Slacks',
          values: [1145, 2368, 1210, 1229, 1336, 1551, 1647, 1660],
          backgroundColor: '#00BCD4',
          lineColor: '#00BCD4',
          marker: {
            backgroundColor: '#00BCD4',
            borderColor: '#00BCD4',
          },
        },
      ],
    };

    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 chartConfig = {
  type: 'area',
  title: {
    text: 'Monthly Apparel Sales',
    adjustLayout: true,
    fontColor: '#424242',
    marginTop: '15px',
  },
  subtitle: {
    text: 'In thousands (k)',
    adjustLayout: true,
    fontColor: '#616161',
    marginTop: '45px',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    alphaArea: 0.6,
    aspect: 'spline',
    stacked: true,
  },
  plotarea: {
    margin: 'dynamic',
  },
  scaleX: {
    item: {
      fontColor: '#616161',
      paddingTop: '5px',
    },
    label: {
      fontColor: '#616161',
      text: '2019',
    },
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
    lineColor: '#AAA5A5',
    tick: {
      lineColor: '#AAA5A5',
    },
  },
  scaleY: {
    guide: {
      lineColor: '#AAA5A5',
      lineStyle: 'dotted',
    },
    item: {
      fontColor: '#616161',
      paddingRight: '5px',
    },
    label: {
      fontColor: '#616161',
      text: 'Quantity',
    },
    lineColor: '#AAA5A5',
    short: true,
    shortUnit: 'k',
    tick: {
      lineColor: '#AAA5A5',
    },
  },
  crosshairX: {
    lineColor: '#AAA5A5',
    plotLabel: {
      backgroundColor: '#EBEBEC',
      borderColor: '#AAA5A5',
      borderRadius: '2px',
      borderWidth: '2px',
      fontColor: '#616161',
      thousandsSeparator: ',',
    },
    scaleLabel: {
      backgroundColor: '#EBEBEC',
      borderColor: '#AAA5A5',
      fontColor: '#424242',
    },
  },
  series: [
    {
      text: 'Footware',
      values: [3435, 4212, 1627, 3189, 2325, 1334, 1567, 2685],
      backgroundColor: '#4CAF50',
      lineColor: '#4CAF50',
      marker: {
        backgroundColor: '#4CAF50',
        borderColor: '#4CAF50',
      },
    },
    {
      text: 'Accessories',
      values: [2221, 3535, 4340, 2232, 4212, 1259, 3611, 4230],
      backgroundColor: '#E53935',
      lineColor: '#E53935',
      marker: {
        backgroundColor: '#E53935',
        borderColor: '#E53935',
      },
    },
    {
      text: 'Pants/Slacks',
      values: [1145, 2368, 1210, 1229, 1336, 1551, 1647, 1660],
      backgroundColor: '#00BCD4',
      lineColor: '#00BCD4',
      marker: {
        backgroundColor: '#00BCD4',
        borderColor: '#00BCD4',
      },
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});
.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}
Spline Chart with Dynamic Labels 268/281 Mixed Time Series with Zooming

Related Documentation: