Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why alphaNumerate() the chart series' class names?

See original GitHub issue

Currently, the series’ class names are constructed like this: ct-series-a, ct-series-b up to ct-series-z, then it starts at ct-series-a again.

This only allows for 26 series in a chart - seems a bit arbitrary to me. It’s also not enough for a — granted, maybe far-fetched — use case like a line per day in a month or the cumulative salaries (stacked bars) in a company with more than 26 employees.

I think it would be better to have just the number in the class name (ct-series-0, ct-series-1, etc.) - it’s easier to implement, more intuitive (as the series’ name now corresponds 1-on-1 to the series’ key) and more flexible.


Issue Analytics

  • State:open
  • Created 9 years ago
  • Comments:5

github_iconTop GitHub Comments

gionkunzcommented, Jan 18, 2016

You can do so by using the object series notation demonstrated on this Pie chart example, that is also valid for bar and line charts:

// Overriding the class names for individual series as well as a name and meta data.
// The name will be written as ct:series-name attribute and the meta data will be serialized and written
// to a ct:meta attribute.
new Chartist.Pie('.ct-chart', {
  series: [{
    value: 20,
    name: 'Series 1',
    className: 'my-custom-class-one',
    meta: 'Meta One'
  }, {
    value: 10,
    name: 'Series 2',
    className: 'my-custom-class-two',
    meta: 'Meta Two'
  }, {
    value: 70,
    name: 'Series 3',
    className: 'my-custom-class-three',
    meta: 'Meta Three'

For Line and Bar charts just use data: [1, 2, 3, 4] instead of value: 10. The key is to use an object notation and use className to override the class name of your series.

stringfellowcommented, Jan 18, 2016

👍 perfect, thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

5.5 Character Classes and Bracket Expressions -
Finally, certain named classes of characters are predefined within bracket expressions, as follows. Alphanumeric characters: ' [:alpha:] ' and ' [:digit:] '; ...
Read more >
Alphanumeric Characters - Video & Lesson Transcript
Learn the definition of alphanumeric characters and the uses of alphanumeric ... See examples of how alphanumeric symbols are used in human.
Read more >
Class ChartSeries - API Reference | Telerik UI for Blazor
The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start...
Read more >
Data types for Access desktop databases - Microsoft Support
Data types for Access desktop databases ; Short Text (formerly known as “Text”). Alphanumeric data (names, titles, etc.) Up to 255 characters. ;...
Read more >
The Class System | Ext JS 6.0.2 - Sencha Documentation
Class names may only contain alphanumeric characters. ... Submit is stored in path/to/src/Ext/form/action/Submit.js; MyCompany.chart.axis.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found