[json] graphset > scaleY > mediaRules

<!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></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'scatter',
      scaleX: {
        values: '0:100:10',
        item: {
          fontSize: 10
        },
        guide: {
          visible: false
        }
      },
      scaleY: {
        values: '0:100:20',
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid'
        },
        minorTicks: 9,
        minorGuide: {
          alpha: 1
        },
        markers: [{
            type: 'area',
            range: [0, 20],
            backgroundColor: '#C5CAE9'
          },
          {
            type: 'area',
            range: [20, 40],
            backgroundColor: '#9FA8DA'
          },
          {
            type: 'area',
            range: [40, 60],
            backgroundColor: '#7986CB'
          },
          {
            type: 'area',
            range: [60, 80],
            backgroundColor: '#5C6BC0'
          },
          {
            type: 'area',
            range: [80, 100],
            backgroundColor: '#3F51B5'
          }
        ],
        mediaRules: [{
          maxWidth: 400,
          guide: {
            lineColor: 'red',
          },
          minorTicks: 3
        }]
      },
      scaleY2: {
        values: '0:100:20',
        item: {
          fontSize: 10
        },
        guide: {
          visible: false
        },
        minorTicks: 9,
      },
      crosshairX: {
        alpha: 0.3,
        lineWidth: 5,
        marker: {
          backgroundColor: 'white',
          borderColor: '#3F51B5',
          borderWidth: 1,
          size: 5,
        },
        plotLabel: {
          alpha: 0.7,
          borderColor: '#303F9F',
          borderRadius: 3,
          fontColor: '#303F9F',
          placement: 'node-top',
          multiple: true,
          text: '<strong>%t:</strong> %v',
          textAlpha: 1
        },
        scaleLabel: {
          backgroundColor: '#303F9F',
          borderRadius: 3
        }
      },
      crosshairY: {
        alpha: 0.3,
        lineWidth: 5,
        type: 'multiple',
        scaleLabel: {
          backgroundColor: '#303F9F',
          borderRadius: 3
        }
      },
      plot: {
        marker: {
          backgroundColor: '#9FA8DA #3F51B5'
        },
        tooltip: {
          visible: false
        }
      },
      series: [{
        values: [
          [21.5, 23.5],
          [23.1, 30.3],
          [25.1, 34.3],
          [30.2, 34.2],
          [30.9, 29.3],
          [31.9, 39.9],
          [34.2, 50.5],
          [35.5, 33.3],
          [39.1, 39.1],
          [53.2, 54.3],
          [57.1, 60.1],
          [59.5, 60.5],
          [61.6, 61.7],
          [64.1, 64.2],
          [69.5, 70.9],
          [70.3, 80.9],
          [71.7, 63.7],
          [75.4, 83.4],
          [80.3, 89.4],
          [80.9, 84.3],
          [85.1, 83.1],
          [85.3, 87.5],
          [89.3, 84.9],
          [90.1, 91.2],
          [91.3, 95.3],
          [92.4, 90.8],
          [93.5, 98.7],
          [95.5, 96.5],
          [96.1, 90.5],
          [99.1, 99.1]
        ],
        text: 'Marker'
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      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'></div>
</body>

</html>

let chartConfig = {
  type: 'scatter',
  scaleX: {
    values: '0:100:10',
    item: {
      fontSize: 10
    },
    guide: {
      visible: false
    }
  },
  scaleY: {
    values: '0:100:20',
    item: {
      fontSize: 10
    },
    guide: {
      lineStyle: 'solid'
    },
    minorTicks: 9,
    minorGuide: {
      alpha: 1
    },
    markers: [{
        type: 'area',
        range: [0, 20],
        backgroundColor: '#C5CAE9'
      },
      {
        type: 'area',
        range: [20, 40],
        backgroundColor: '#9FA8DA'
      },
      {
        type: 'area',
        range: [40, 60],
        backgroundColor: '#7986CB'
      },
      {
        type: 'area',
        range: [60, 80],
        backgroundColor: '#5C6BC0'
      },
      {
        type: 'area',
        range: [80, 100],
        backgroundColor: '#3F51B5'
      }
    ],
    mediaRules: [{
      maxWidth: 400,
      guide: {
        lineColor: 'red',
      },
      minorTicks: 3
    }]
  },
  scaleY2: {
    values: '0:100:20',
    item: {
      fontSize: 10
    },
    guide: {
      visible: false
    },
    minorTicks: 9,
  },
  crosshairX: {
    alpha: 0.3,
    lineWidth: 5,
    marker: {
      backgroundColor: 'white',
      borderColor: '#3F51B5',
      borderWidth: 1,
      size: 5,
    },
    plotLabel: {
      alpha: 0.7,
      borderColor: '#303F9F',
      borderRadius: 3,
      fontColor: '#303F9F',
      placement: 'node-top',
      multiple: true,
      text: '<strong>%t:</strong> %v',
      textAlpha: 1
    },
    scaleLabel: {
      backgroundColor: '#303F9F',
      borderRadius: 3
    }
  },
  crosshairY: {
    alpha: 0.3,
    lineWidth: 5,
    type: 'multiple',
    scaleLabel: {
      backgroundColor: '#303F9F',
      borderRadius: 3
    }
  },
  plot: {
    marker: {
      backgroundColor: '#9FA8DA #3F51B5'
    },
    tooltip: {
      visible: false
    }
  },
  series: [{
    values: [
      [21.5, 23.5],
      [23.1, 30.3],
      [25.1, 34.3],
      [30.2, 34.2],
      [30.9, 29.3],
      [31.9, 39.9],
      [34.2, 50.5],
      [35.5, 33.3],
      [39.1, 39.1],
      [53.2, 54.3],
      [57.1, 60.1],
      [59.5, 60.5],
      [61.6, 61.7],
      [64.1, 64.2],
      [69.5, 70.9],
      [70.3, 80.9],
      [71.7, 63.7],
      [75.4, 83.4],
      [80.3, 89.4],
      [80.9, 84.3],
      [85.1, 83.1],
      [85.3, 87.5],
      [89.3, 84.9],
      [90.1, 91.2],
      [91.3, 95.3],
      [92.4, 90.8],
      [93.5, 98.7],
      [95.5, 96.5],
      [96.1, 90.5],
      [99.1, 99.1]
    ],
    text: 'Marker'
  }]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: 400,
  width: '100%'
});