Stepped Line Chart with Selection

Please enable JavaScript to see the interactive demo.

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

<!doctype html>
<html class="zc-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 class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
    // -----------------------------
    let chartData = [{
        text: 'Broncos',
        values: [20, 18, 18, 22, 20, 26, 26, 19, 19, 20, 20, 18, 16, 14, 17, 17, 25],
        lineColor: '#E56130',
        lineWidth: '2px',
        marker: {
          backgroundColor: '#E56130',
          borderColor: '#E56130',
          borderWidth: '0px',
          hoverState: {
            alpha: 0.5,
            borderColor: '#E56130',
            borderWidth: '3px'
          },
          shadow: false
        }
      },
      {
        text: 'Chargers',
        values: [10, 14, 11, 11, 14, 10, 6, 6, 5, 5, 4, 6, 5, 5, 5, 2, 6],
        lineColor: '#0E74B6',
        lineWidth: '2px',
        marker: {
          backgroundColor: '#0E74B6',
          borderColor: '#0E74B6',
          borderWidth: '0px',
          shadow: false
        }
      },
      {
        text: 'Raiders',
        values: [24, 27, 28, 30, 28, 31, 32, 32, 32, 32, 32, 30, 30, 29, 27, 29, 24],
        lineColor: '#5B5B5B',
        lineWidth: '2px',
        marker: {
          backgroundColor: '#5B5B5B',
          borderColor: '#5B5B5B ',
          borderWidth: '0px',
          shadow: false
        }
      },
      {
        text: 'Chiefs',
        values: [17, 11, 4, 2, 2, 2, 3, 3, 3, 3, 2, 3, 3, 4, 2, 3, 4],
        lineColor: '#990F13',
        lineWidth: '2px',
        marker: {
          backgroundColor: '#990F13',
          borderColor: '#990F13',
          borderWidth: '0px',
          shadow: false
        }

      }
    ];

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'line',
      backgroundColor: 'white',
      borderTop: '1px solid #eee',
      borderRight: '1px solid #eee',
      borderBottom: '1px solid #eee',
      borderLeft: '1px solid #eee',
      title: {
        text: 'NFL Power Rankings By Week, 2018-2019',
        backgroundColor: 'none',
        fontColor: '#666',
        fontSize: '24px',
        height: '40px',
        y: '10px'
      },
      legend: {
        align: 'center',
        marginTop: '9%',
        borderColor: 'none',
        footer: {
          text: 'Placement out of 32 NFL teams<br>(click markers to select)',
          align: 'center',
          borderColor: 'none',
          fontColor: '#666',
          fontSize: '11px'
        },
        item: {
          fontColor: '#666'
        },
        layout: 'float',
        marker: {
          shadow: false,
          size: '5px'
        },
        shadow: false
      },
      plot: {
        aspect: 'stepped',
        hoverMarker: {
          size: '7px'
        },
        marker: {
          type: 'square',
          size: '4px'
        },
        selectedMarker: {
          type: 'star7',
          backgroundColor: '#FFBC2F',
          size: '10px'
        },
        selectionMode: 'plot'
      },
      plotarea: {
        margin: '8% 7% 18% 10%',
        borderColor: 'black',
      },
      scaleX: {
        values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
        item: {
          paddingTop: '10px',
          fontAngle: 360,
          fontColor: '#666'
        },
        itemsOverlap: true,
        label: {
          text: 'Week',
          paddingTop: '15px',
          fontColor: '#666',
          fontSize: '12px'
        },
        lineColor: '#666',
        tick: {
          lineColor: '#666'
        },
        zooming: true
      },
      scaleY: {
        values: '1:32:1',
        fontColor: '#666',
        item: {
          paddingRight: '5px',
          color: '#666'
        },
        label: {
          text: 'Rank',
          fontColor: '#666',
          fontSize: '12px'
        },
        lineColor: '#666',
        mirrored: 1,
        tick: {
          lineColor: '#666'
        }
      },
      source: {
        text: 'Source: www.nfl.com',
        marginRight: '10px',
        marginBottom: '10px',
        fontColor: '#666',
        fontSize: '12px',
        fontWeight: '1px'
      },
      tooltip: {
        text: 'Week: %scale-key-value<br>Rank: %v',
        borderRadius: '5px',
        shadow: false,
        textAlign: 'left'
      },
      zoom: {
        alpha: 0.25,
        backgroundColor: 'yellow',
        preserveZoom: true
      },
      series: chartData
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });
  </script>
</body>

</html>

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

// DEFINE DATA
// -----------------------------
let chartData = [
  {
    text: 'Broncos',
    values: [20, 18, 18, 22, 20, 26, 26, 19, 19, 20, 20, 18, 16, 14, 17, 17, 25],
    lineColor: '#E56130',
    lineWidth: '2px',
    marker: {
      backgroundColor: '#E56130',
      borderColor: '#E56130',
      borderWidth: '0px',
      hoverState: {
        alpha: 0.5,
        borderColor: '#E56130',
        borderWidth: '3px'
      },
      shadow: false
    }
  },
  {
    text: 'Chargers',
    values: [10, 14, 11, 11, 14, 10, 6, 6, 5, 5, 4, 6, 5, 5, 5, 2, 6],
    lineColor: '#0E74B6',
    lineWidth: '2px',
    marker: {
      backgroundColor: '#0E74B6',
      borderColor: '#0E74B6',
      borderWidth: '0px',
      shadow: false
    }
  },
  {
    text: 'Raiders',
    values: [24, 27, 28, 30, 28, 31, 32, 32, 32, 32, 32, 30, 30, 29, 27, 29, 24],
    lineColor: '#5B5B5B',
    lineWidth: '2px',
    marker: {
      backgroundColor: '#5B5B5B',
      borderColor: '#5B5B5B ',
      borderWidth: '0px',
      shadow: false
    }
  },
  {
    text: 'Chiefs',
    values: [17, 11, 4, 2, 2, 2, 3, 3, 3, 3, 2, 3, 3, 4, 2, 3, 4],
    lineColor: '#990F13',
    lineWidth: '2px',
    marker: {
      backgroundColor: '#990F13',
      borderColor: '#990F13',
      borderWidth: '0px',
      shadow: false
    }

  }
];

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'line',
  backgroundColor: 'white',
  borderTop: '1px solid #eee',
  borderRight: '1px solid #eee',
  borderBottom: '1px solid #eee',
  borderLeft: '1px solid #eee',
  title: {
    text: 'NFL Power Rankings By Week, 2018-2019',
    backgroundColor: 'none',
    fontColor: '#666',
    fontSize: '24px',
    height: '40px',
    y: '10px'
  },
  legend: {
    align: 'center',
    marginTop: '9%',
    borderColor: 'none',
    footer: {
      text: 'Placement out of 32 NFL teams<br>(click markers to select)',
      align: 'center',
      borderColor: 'none',
      fontColor: '#666',
      fontSize: '11px'
    },
    item: {
      fontColor: '#666'
    },
    layout: 'float',
    marker: {
      shadow: false,
      size: '5px'
    },
    shadow: false
  },
  plot: {
    aspect: 'stepped',
    hoverMarker: {
      size: '7px'
    },
    marker: {
      type: 'square',
      size: '4px'
    },
    selectedMarker: {
      type: 'star7',
      backgroundColor: '#FFBC2F',
      size: '10px'
    },
    selectionMode: 'plot'
  },
  plotarea: {
    margin: '8% 7% 18% 10%',
    borderColor: 'black',
  },
  scaleX: {
    values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
    item: {
      paddingTop: '10px',
      fontAngle: 360,
      fontColor: '#666'
    },
    itemsOverlap: true,
    label: {
      text: 'Week',
      paddingTop: '15px',
      fontColor: '#666',
      fontSize: '12px'
    },
    lineColor: '#666',
    tick: {
      lineColor: '#666'
    },
    zooming: true
  },
  scaleY: {
    values: '1:32:1',
    fontColor: '#666',
    item: {
      paddingRight: '5px',
      color: '#666'
    },
    label: {
      text: 'Rank',
      fontColor: '#666',
      fontSize: '12px'
    },
    lineColor: '#666',
    mirrored: 1,
    tick: {
      lineColor: '#666'
    }
  },
  source: {
    text: 'Source: www.nfl.com',
    marginRight: '10px',
    marginBottom: '10px',
    fontColor: '#666',
    fontSize: '12px',
    fontWeight: '1px'
  },
  tooltip: {
    text: 'Week: %scale-key-value<br>Rank: %v',
    borderRadius: '5px',
    shadow: false,
    textAlign: 'left'
  },
  zoom: {
    alpha: 0.25,
    backgroundColor: 'yellow',
    preserveZoom: true
  },
  series: chartData
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig
});

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

.zc-ref {
  display: none;
}

Time Series Line Chart 237/281 Time Series Line Chart with Toggle

Stepped Line Chart with Selection

Related Documentation: