JavaScript
anychart.onDocumentReady(function () {
stage = anychart.graphics.create("container");
// create data
var data = [
{x: Date.UTC(2017, 5, 6, 1, 15, 0), value: -10},
{x: Date.UTC(2017, 5, 6, 2, 16, 0), value: 15},
{x: Date.UTC(2017, 5, 6, 4, 17, 0), value: 5},
{x: Date.UTC(2017, 5, 6, 9, 18, 0), value: 45},
{x: Date.UTC(2017, 5, 6, 10, 19, 0), value: 25},
{x: Date.UTC(2017, 5, 7, 0, 2, 0), value: -2},
{x: Date.UTC(2017, 5, 7, 2, 5, 0), value: -12},
{x: Date.UTC(2017, 5, 7, 7, 25, 0), value: -13},
{x: Date.UTC(2017, 5, 7, 13, 45, 0), value: 4},
{x: Date.UTC(2017, 5, 7, 20, 5, 0), value: 43},
{x: Date.UTC(2017, 5, 7, 23, 15, 0), value: 23},
{x: Date.UTC(2017, 5, 8, 2, 5, 0), value: -20}
];
// create a chart
chart = anychart.line();
var dateScale = anychart.scales.dateTime();
//set DateTime type of scale
var xScale = chart.xScale(dateScale);
var xAxis = chart.xAxis();
//set zero line by yAxis
var zeroLine = chart.lineMarker();
zeroLine.value(0);
zeroLine.stroke("2 grey");
// create a spline series and set the data
var series = chart.line(data);
//custom rendering
var currentRendering = series.rendering();
currentRendering.needsZero(true);
// Set point settings.
setupDrawer(series, xAxis, chart);
// set red stroke for parts of line below zero value
series.lowStroke('red');
var tooltips = chart.tooltip();
tooltips.titleFormat(function(){
return anychart.format.dateTime(this.x, "dd MMMM HH:mm");
});
tooltips.format("Value: {%Value}");
chart.container(stage);
chart.draw();
});
function setupDrawer(series, xAxis, chart) {
//array for standalone labels and counter
var labelsArr = [];
var labelCount = 0;
//remove old current labels when resize container
window.onresize = function () {
for (var item in labelsArr) {
...