• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <!-- CHART CONTAINER -->
        <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"]; // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
    
                // full ZingChart schema can be found here:
                // https://www.zingchart.com/docs/api/json-configuration/
                let chartConfig = {
                    "graphset": [{
                        "type": "line",
                        "title": {
                            "text": "Legend HoverState"
                        },
                        "plotarea": {
    
                        },
                        "scaleX": {
    
                        },
                        "scaleY": {
    
                        },
                        "plot": {
                            highlightState: {
                                lineWidth: 5
                            },
                        },
                        "legend": {
                            "highlightPlot": true,
                            "highlightLegend": true,
                            "item": {
                                "fontSize": 11,
                                "color": "#600",
                                "highlight-state": {
                                    "color": "#a00",
                                    "backgroundColor": "#ccc"
                                }
                            },
    
                            "marker": {
                                "type": "rectangle",
                                "width": 12,
                                "height": 12,
                                "borderWidth": 2,
                                "highlight-state": {
                                    "type": "diamond",
                                    "size": 6,
                                    "borderColor": "#333",
                                    "borderWidth": 1
                                }
                            }
                        },
                        "series": [{
                                "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
                                "text": "A A A A A"
                            },
                            {
                                "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
                                "text": "B B B B B"
                            },
                            {
                                "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
                                "text": "C C C C C"
                            },
                            {
                                "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
                                "text": "D D D D D"
                            }
                        ]
                    }]
                };
    
                // render chart
                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>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
          <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
      </body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
    "graphset":[
        {
            "type":"line",
            "title":{
                "text":"Legend HoverState"
                },
            "plotarea":{
                
                },
            "scaleX":{
                
                },
            "scaleY":{
                
                },
            "plot":{
                highlightState: { lineWidth: 5},
                },
            "legend":{
                "highlightPlot":true,
                "highlightLegend":true,
                "item":{
                  "fontSize":11,
                  "color":"#600",
                  "highlight-state":{
                      "color":"#a00",
                      "backgroundColor":"#ccc"
                      }
                  },
                  
                "marker":{
                    "type":"rectangle",
                    "width":12,
                    "height":12,
                    "borderWidth":2,
                    "highlight-state":{
                        "type":"diamond",
                        "size":6,
                        "borderColor":"#333",
                        "borderWidth":1
                        }
                    }
                },
            "series":[
                {
                    "values":[69,68,54,48,70,74,98,70,72,68,49,69],
                    "text":"A A A A A"
                    },
                {
                    "values":[51,53,47,60,48,52,75,52,55,47,60,48],
                    "text":"B B B B B"
                    },
                {
                    "values":[42,43,30,40,31,48,55,46,48,32,38,38],
                    "text":"C C C C C"
                    },
                {
                    "values":[25,15,26,21,24,26,33,25,15,25,22,24],
                    "text":"D D D D D"
                }
            ]
        }
    ]
    };
    
      // render chart
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        width: '100%',
      });
    });