# Indices

Use scriptable options to alternate the style of the labels based on the data indices.

{
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: Utils.color(0),
      borderColor: Utils.color(0),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      })
    }]
  },
  options: {
    plugins: {
      datalabels: {
        align: function(context) {
          return context.dataIndex % 2 ? 'end' : 'center';
        },
        backgroundColor: function(context) {
          return context.dataIndex % 2 ?
            context.dataset.borderColor :
            'rgba(255, 255, 255, 0.8)';
        },
        borderColor: function(context) {
          return context.dataIndex % 2 ? null : context.dataset.borderColor;
        },
        borderWidth: function(context) {
          return context.dataIndex % 2 ? 0 : 2;
        },
        color: function(context) {
          return context.dataIndex % 2 ? 'white' : context.dataset.borderColor;
        },
        font: {
          weight: 'bold',
        },
        formatter: function(value, context) {
          return context.dataIndex + ': ' + Math.round(value) + '\'';
        },
        offset: 8,
        padding: 6,
      }
    },
    // Core options
    aspectRatio: 5 / 3,
    layout: {
      padding: {
        top: 32,
        right: 24,
        bottom: 24,
        left: 0
      }
    },
    elements: {
      line: {
        fill: false,
        tension: 0.4
      }
    },
  }
}