html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a data table

    var dataTable = anychart.data.table();

    dataTable.addData([

      ["2016-12-24", 511.53, 514.98, 505.79, 506.40, 518.40],

      ["2016-12-25", 512.53, 514.88, 505.69, 507.34, 519.34],

      ["2016-12-26", 511.83, 514.98, 505.59, 506.23, 518.23],

      ["2016-12-27", 511.22, 515.30, 505.49, 506.47, 518.47],

      ["2016-12-28", 510.35, 515.72, 505.23, 505.80, 517.80],

      ["2016-12-29", 510.53, 515.86, 505.38, 508.25, 520.25],

      ["2016-12-30", 511.43, 515.98, 505.66, 507.45, 519.45],

      ["2016-12-31", 511.50, 515.33, 505.99, 507.98, 519.98],

      ["2017-01-01", 511.32, 514.29, 505.99, 506.37, 518.37],

      ["2017-01-02", 511.70, 514.87, 506.18, 506.75, 519.75]

    ]);

    // map the data

    mapping = dataTable.mapAs(

      {open: 1, high: 2, low: 3, close: 4, value: 5}

    );

​

    // create a stock chart

    var chart = anychart.stock();

​

    // create a plot

    var plot = chart.plot(0);

    // create two series: line and ohlc

    var line = plot.line(mapping);

    var ohlc = plot.ohlc(mapping);

​

    // enable html for legend items

    line.legendItem().useHtml(true);

    ohlc.legendItem().useHtml(true);

​

    // configure the format of legend items

    line.legendItem().format(

     "<span style='color:#455a64;font-weight:600'>{%seriesName}: " +

     "</span>{%value}"

    );

​

    ohlc.legendItem().format(

     "<span style='color:#455a64;font-weight:600'>{%seriesName}: " +

     "</span>{%open} / {%high} / {%low} / {%close}"

    );

    // set the chart title

    chart.title("AnyStock Legend: Item Text Format (Individual Items + Tokens)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});