Gallery Back to Gallery

Draggable Nodes

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>
    .zc-body {
      background-color: #fff;
    }

    .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 chartConfig = {
      type: 'vbullet',
      title: {
        text: 'Pushups Per Day',
      },
      subtitle: {
        text: 'Bars are draggable',
      },
      plot: {
        tooltip: {
          borderRadius: '3px',
          borderWidth: '0px',
          fontSize: '14px',
          shadow: true,
        },
        valueBox: [{
          type: 'all',
          text: '[%node-value / %node-goal-value]',
          color: '#000',
          placement: 'goal',
        }, ],
      },
      scaleX: {
        labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
      },
      series: [{
        values: [20, 40, 14, 50, 15, 35, 5],
        dataDragging: true,
        goal: {
          backgroundColor: '#64b5f6',
          borderWidth: '0px',
        },
        goals: [25, 43, 30, 40, 21, 59, 35],
        rules: [{
            backgroundColor: '#81c784',
            rule: '%v >= %g',
          },
          {
            backgroundColor: '#ef5350',
            rule: '%v < %g/2',
          },
          {
            backgroundColor: '#ffca28',
            rule: '%v >= %g/2 && %v < %g',
          },
        ],
      }, ],
    };

    zingchart.loadModules('dragging'); // load dragging module
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      modules: 'dragging', // need this to enable drag
      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: 'vbullet',
  title: {
    text: 'Pushups Per Day',
  },
  subtitle: {
    text: 'Bars are draggable',
  },
  plot: {
    tooltip: {
      borderRadius: '3px',
      borderWidth: '0px',
      fontSize: '14px',
      shadow: true,
    },
    valueBox: [
      {
        type: 'all',
        text: '[%node-value / %node-goal-value]',
        color: '#000',
        placement: 'goal',
      },
    ],
  },
  scaleX: {
    labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
  },
  series: [
    {
      values: [20, 40, 14, 50, 15, 35, 5],
      dataDragging: true,
      goal: {
        backgroundColor: '#64b5f6',
        borderWidth: '0px',
      },
      goals: [25, 43, 30, 40, 21, 59, 35],
      rules: [
        {
          backgroundColor: '#81c784',
          rule: '%v >= %g',
        },
        {
          backgroundColor: '#ef5350',
          rule: '%v < %g/2',
        },
        {
          backgroundColor: '#ffca28',
          rule: '%v >= %g/2 && %v < %g',
        },
      ],
    },
  ],
};

zingchart.loadModules('dragging'); // load dragging module
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  modules: 'dragging', // need this to enable drag
  height: '100%',
  width: '100%',
});
.zc-body { background-color: #fff; }

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

.zc-ref {
  display: none;
}
Clickable Valuebox 124/275 Sine Wave with Selection Tool

Related Documentation: