Custom Element Attributes

TLDR; <g class="ct-point" title="Fancy Title, WHEE!"/> is useful, I has!

I know you addressed advanced features such as hover titles and the like some time ago, but I just started looking into chartist and had some features that I felt it could use; specifically custom attributes for series data.

In my use case, I wanted to use the jquery Tooltip library to add fancy hover effects to data. This is a pretty trivial feat via the existing title attribute for DOM elements. However, I felt that using DOM manipulation after-the-fact is a little messy when all I’m needing to do is inject an already-valid attribute onto the generated element.

As such, I’m updating the library to do just this; anything passed in via the series object along side value and className are passed directly through to the DOM, so this adds support for title, data-*, and any other attribute people can think of. If this sounds useful for upstream, just let me know and I’ll see what I can do about making a patch for your upstream version, (aka pull request, silly github terminology).

[gionkunz]

Well, I guess DOM manipulation within the same call-stack of the chart being drawn isn’t hurting that much. The event pipeline helps a lot in this case. What about a plugin?

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4],
  series: [[
    {value: 5, title: 'Five'}, 
    {value: 7, title: 'Seven'}, 
    {value: 3, title: 'Three'}, 
    {value: 9, title: 'Nine'}
  ]]
}, {
  fullWidth: true
});

chart.on('draw', function(data) {
  if(data.type === 'point') {
    data.element.attr({
      title: data.series[data.index].title
    });
  }
});

Also be aware that title is not an officially supported attribute on SVG elements. In SVG there’s a <title> element for this purpose.

If you want to use a tooltip plugin, you can configure therm fairly easy to work with Chartist. I’m using tooltipster frequently with Chartist.

[gionkunz]

You can use the created event and then use element.querySelectorAll('g') http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-queryselectorall