buttonhighchartsdatefilterleftalign

Stock chart timeline buttons and date field left align with chart


I need guide make my chart as shown in the attached screenshot. I have been using HighCharts for this purpose, but couldn't find appropriate options or configurations to do so. Following is the screen shot of my required design:

enter image description here

I am also attaching the fiddle link to my current implementation that I used to achieve these design requirements.

My Fiddle

HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript:

Highcharts.stockChart('container', {
  chart: {
    spacingLeft: 200,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity'
  },
  rangeSelector: {
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },
  legend: {
    enable: true,
    align: 'left',
    verticalAlign: 'top',
    layout: 'vertical',
    x: 0,
    y: 100
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

Kindly if some one can guide me in doing proper configurations or styling to achieve this.

Thanks.


Solution

  • This is the closest I could get

    http://jsfiddle.net/0yax1bav/5/

    Add spacing on the left:

    chart: {
        spacingLeft: 300,
    },
    

    Move legend to the left:

    legend: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        layout: 'vertical',
        x: -250,
        y: 150
    },
    

    Move title to the left:

    title : {
        align: 'left',
        x: -280,
        text : 'Activity',
        floating: true
    },
    

    Move range to the left:

    rangeSelector: {
        floating: true,
        x: 0,
        verticalAlign: 'middle',
        buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
        inputPosition: {
            align: 'left',
            y: 15,
            x: -280
        },
        ...
    

    Disable exporting buttons:

    exporting:{
        buttons:{
            contextButton: {
                enabled: false
            }
        }
    }
    

    Highcharts.stockChart('container', {
      chart: {
        spacingLeft: 300,
      },
      legend: {
            enabled: true,
            align: 'left',
            verticalAlign: 'top',
            layout: 'vertical',
            x: -250,
            y: 150
        },
      navigator: {
        enabled: false
      },
      scrollbar: {
        enabled: false
      },
      exporting:{
        buttons:{
            contextButton: {
                enabled: false
            }
        }
      },
      title : {
        align: 'left',
        x: -280,
        text : 'Activity',
        floating: true
      },
      rangeSelector: {
        floating: true,
        x: 0,
        verticalAlign: 'middle',
        buttonPosition: {
                align: 'left',
                y: 20,
                x: -140
            },
        inputPosition: {
               align: 'left',
               y: 15,
               x: -280
        },
        allButtonsEnabled: true,
        buttons: [{
          type: 'month',
          count: 3,
          text: 'Daily',
          dataGrouping: {
            forced: true,
            units: [['day', [1]]]
          }
        }, {
          type: 'year',
          count: 1,
          text: 'Weekly',
          dataGrouping: {
            forced: true,
            units: [['week', [1]]]
          }
        }, {
          type: 'all',
          text: 'Monthly',
          dataGrouping: {
            forced: true,
            units: [['month', [1]]]
          }
        }],
        buttonTheme: {
          width: 60
        },
        selected: 2
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          month: '%e. %b',
          year: '%b'
        }
      },
      series: [{
        name: 'Label 1',
        color: "#00aade",
        data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
      },
      {
        name: 'Label 2',
        color: "#8cc63e",
        data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
      }]
    });