Highchart - Datetime

Retention - Exemplo com datas no eixo dos x e de intervalo

by NunoMira

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function ()
{
    Highcharts.chart('container',
    {
      	chart :
        {
          //renderTo:'container',
          backgroundColor : 'transparent',
          type: 'spline',
          //width: 300,
          //borderWidth: 1,
          //plotBorderWidth: 1,
          //spacingLeft: 0,
        },
        title:
        {
            text: 'Daily New Users'
        },
        subtitle:
        {
            text: '<a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'Veja <span style="cursor: pointer; font-weight: bold;">aqui</span> mais informação sobre esta métrica.</a>'
        },
        navigation:
        {
            buttonOptions:
            {
              enabled: false
            }
        },
       yAxis:
       {
            title:
            {
                text: 'Total de utilizadores (%)'
            },
				},
        xAxis:
        {
            type: 'datetime',
       			labels:
            {
                rotation: -65,
                style:
                {
                    fontSize: '9px',
                    //fontFamily: 'Verdana, sans-serif'
                }
            },
            dateTimeLabelFormats:
            {
                day: '%e/%b/%y',
            }
        },
        tooltip:
        {
            //pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            pointFormat: '<b>{point.y:,.0f}</b> novos utilizadores'
        },
      	legend:
        {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'center',
            borderWidth: 0,
            enabled: true
        },
       series: 
       [{
       			name: 'Dia 1',
            data: [69, 70, 80, 85, 90, 90, 80, 70],
            pointStart: Date.UTC(2017, 0, 1),
            lineWidth: 4,
            color: '#DDAA95',
        		//dashStyle: 'longdash', //'ShortDash',
            //dashStyle: 'longdash',
           ...