multiple series labels and identifying about chartist HOT 18 CLOSED

Hi there and thanks! :-) They get a default class that is generated. ct-series-a, ct-series-b, ct-series-c etc. You can also override by using the object series notation:

var data = {

    //my labels
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],

    //my multiple series
    series: [
        //series1: label example: apples
        {
          className: 'apples',
          name: 'My nice apples',
          data: [5, 2, 4, 2, 0],
        },
        {
        //series1: label example: lemons
          className: 'lemons',
          name: 'My nice lemons',
          data: [8, 1, 14, 12, 10],
        }
    ]
};

Then you'll have two things available, first a class will be set on a group above the form elements (series group) as well as some custom attributes on your element containing the original data values. You can also check the new advanced example to attach behavior: http://gionkunz.github.io/chartist-js/getting-started.html#adding-behavior-to-your-charts

from chartist.

@wgbn search for chartist label plugin on NPM / Github.

from chartist.

@Timmmm Again, Chartist was created with the principle to keep a very strong separation of concerns. However, if you'd like to make your chart dynamic and use behavior to change your chart appearance, you can make use of the reactive event model in Chartist.

Your example could simply be implemented with the following code:

http://jsbin.com/xusinu/1/edit?css,js,output

I hope this helps.
Cheers
Gion

from chartist.

woow thanks alot! :)

from chartist.

You're welcome!

from chartist.

and how can i force to use specific color for each line (lemons = yellow line; apples: red line)? thanks!

from chartist.

You need to use css. Check the chartist css to see what styles are applied. I recommend to inspect your chart in the browser dev tools. You can use various style attributes for svg. Chack this article by Jakob Jenkov which is a great summary http://tutorials.jenkov.com/svg/svg-and-css.html

from chartist.

You can add them via the css .ct-chart .ct-series.ct-series-a .ct-line and .ct-chart .ct-series.ct-series-a .ct-point just change the stroke to the color you
want and the series .ct-series-a, .ct-series-b, ... to different colors.

ct-series-a would be your lemons and ct-series-b your apples

from chartist.

waw thanks!

if i follow the ClassName example:

{
          className: 'apples',
          name: 'My nice apples',
          data: [5, 2, 4, 2, 0],
        },
        {
        //series1: label example: lemons
          className: 'lemons',
          name: 'My nice lemons',
          data: [8, 1, 14, 12, 10],
        }

then my CSS .ct-series-a, ct-series-b wil also be replaced by 'apples', 'lemons'?

from chartist.

It would be nice if there was also a way to specify the line style in javascript, without using CSS. This would be useful if you want the style to represent data.

from chartist.

@Timmmm, styling in JavaScript is against the core principle of Chartist to keep a clean separation of concerns. If you need to dynamically style your element you can use the draw events of Chartist.

from chartist.

@gionkunz I understand what you mean - you want the line style to literally be part of the website style. However sometimes the line style can be used to convey information about the data itself, which is handled in javascript. For example how would you do this chart in chartist?:

(Assuming that you did not know the widths in advance. Not the best example but you get the idea.)

In my case the graph lines are literally related to colours, so it would be nice to be able to just directly set the line colour to be the same as the colour that the line represents.

from chartist.

Great example, that'll do nicely thanks!

from chartist.

txs!!

from chartist.

How would you do this sort of bar chart coloring, where items under certain label would be color coordinated? http://www.politiko.dk/barometeret

from chartist.

@lkallioniemi I guess this is a different use case where you display series along the X axis instead of drawing all series per step on the X axis. For this sort of bar chart you'd need to specify two series (poll one and poll two) and specify the paries as labels. Using the draw events like in this example http://jsbin.com/xusinu/1/edit?css,js,output you can then apply the colors to the bars.

from chartist.

I have this script:

var options = {
    plugins: [
        Chartist.plugins.ctPointLabels({
            labelClass: 'ct-label',
            textAnchor: 'middle',
            labelInterpolationFnc: function(value) {
                return value.toFixed(2)+'kg';
            }
        })
    ],
    showPoint: true,
    lineSmooth: false,
    axisY: {
        labelInterpolationFnc: function(value) {
            return value + 'kg';
        }
    }
};
var data = {
    labels: ['Maio', 'Junho', 'Julho', 'Agosto'],
    series: [
        {
            name: 'oleo',
            data: [2.7, 2.6, 1.9, 1.5]
        },
        {
            name: 'margarina',
            data: [4.2, 4.5, 3.4, 2.8]
        },
        {
            name: 'acucar',
            data: [11.3, 11.2, 7.2, 5.7]
        }
    ]
};
new Chartist.Line('.ct-chart', data, options);

but the subtitles of series don't show like a example of @Timmmm !!!! why?

from chartist.

Hello, this is a great chart. I just have a question about this. I was trying to hide a line onClick, how would I accomplish that? I tried to document.getElementsByClassName('ct-series-a').style.visibility = 'hidden' but this didn't fount that class.

from chartist.