Back

Line with markers

Line chart for time series data where each value shows a line marker. Enabled and configured with 'marker' under 'series'->'style'. In addition to 'shape', you can configure various other properties like 'fillColor', 'width', 'lineColor' and others.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                data:
                {
                    units:["h"],
                    url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
                },
                valueAxisDefault:{ title:"Temperature" },
                series:[
                    {
                        name:"Average temperature",
                        id:"maxTemp",
                        type:"line",
                        data:{
                            index:1,
                            aggregation:"avg"
                        },
                        style:{
                            smoothing: true,
                            lineColor:"red",
                            lineWidth: 3,
                            marker:{
                                shape:"rect"
                            }
                        }
                    }
                ]
            }
    );

Data

Data 
//Data too large to output
Download Data