ct-point with horizontal label

Hi Gion Would be nice if ct-point element contains also value from horizontal axis, something like:

<line x1="" y1="" x2="" y2="" class="ct-point" ct:value="" ct:horizontal-label="27.02.2015"></line>

This value is needed for tooltips. Currently I have workaround for this, which doesn’t work when showLabel is false.

chart.on('created', function() {
    var horizontalLabels = svgElement.find('.ct-labels .ct-label.ct-horizontal');

    svgElement.find('.ct-series').each(function() {
        $(this).find('.ct-point').each(function(i) {
            $(this).attr('ct:horizontal-label', horizontalLabels.eq(i).text());
        });
    });
});

[gionkunz]

Also useful in this context is that meta can also be a complex object where it will be serialized with Chartist.serialize and can be deserialized from the DOM attribute with Chartist.deserialize.

function buildMeta(data) {
  data.series = data.series.map(function(values, valuesIndex) {
    return values.map(function(value, valueIndex) {
      return {
        value: value,
        meta: {
          label: data.labels[valueIndex],
          labelIndex: valuesIndex,
          value: value,
          valueIndex: valueIndex
        }
      };
    });
  });
}

var chart = new Chartist.Line('.ct-chart', {
  labels: ['One', 'Two', 'Three', 'Four', 'Five'],
  series: [
    [1, 5, 4, 3, 4],
    [2, 3, 2, 2, 3]
  ]
});

chart.on('data', function(data) {
  buildMeta(data.data);
});

$(document).on('mouseenter', '.ct-point', function() {
  console.log(Chartist.deserialize($(this).attr('ct:meta')));
});

http://jsbin.com/wopoya/3/edit?js,console,output

[martinsznapka]

Ok, good point. Lets keep it in mind in case of meta conflicts. Thx for your help.