Hi,

Do you think it could be possible to specify, for each serie of data, a svg basic shape element.
I know I can draw squares with the css property stroke-linecap: square but it could be really cool to change the line element by circle, polygon or polyline element.

Thanks for your feedbacks

Hi guys,

Chartist looks great - could I suggest that if you have information on browser support, you publish it on the site? It's the first thing we were looking for as part of the decision whether to use it or not!

Thanks,

Ben

grunt serve aborts due to a missing Sass import.

Running "concurrent:test" (concurrent) task
    Warning: Running "sass:dist" (sass) task
    Warning: /home/grizzle/code/chartist-js/source/styles/site/main.scss:10: error: file to import not found or unreadable: "compass-mixins/lib/compass/css3"
     Use --force to continue.

    Aborted due to warnings.

Occasionally, it's not apparent what a given axis/labels is/are referring to. Axis titles help to bring context.

I was hoping to handle axis titles myself outside the chartist.js by using absolutely positioned psuedo elements. For example:

HTML:

 <div class="ct-chart" data-x-axis="My x-axis title" data-y-axis="My y-axis-title"></div>

CSS:

.ct-chart { position: relative; }

[data-x-axis]::before {
  content: attr(data-x-axis);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

[data-y-axis]::after {
  content: attr(data-y-axis);
  position: absolute;
  /* vertical text rotation stuff */
}

But that produces a few problems:

1. Takes axis title elements out of normal flow. In my example, axis titles are absolutely positioned. I could add a margin to the chart element, but that gets especially harry if the axis title needs to wrap to a second line
2. Titles are never truly centered in relation to axis lines. The labels add extra padding to the chart pane.
3. Reliably positioning y-axis rotated text is a huge pain... if not impossible. I can't seem to find a way to position the title reliably. Especially if the y-axis title needs to wrap to a second line.

My SVG text positioning knowledge is quite limited, but I would think this problem would be better handled in SVG over HTML/CSS.

Should have the coordinates (x, y) plus stuff like polarToCartesian function

Hi there ,

I would like to have straight lines between each points. i took a screen capture of my problem.

Is that possible ? thanks

Hi! Thanks for your great job on this project!

I've tested lineChart with different series of data and I'd like to report a bug when a data array is full of "0".

Lots of errors are printed in console like:
Error: Invalid value for <line> attribute y2="NaN"
And finally, the console prints the following error:
Error: Invalid value for <path> attribute d="M20,NaN L 41.71875,NaNL 63.4375,NaNL 85.15625,NaNL 106.875,NaNL 128.59375,NaNL 150.3125,NaNL 172.03125,NaNL 193.75,NaNL 215.46875,NaNL 237.1875,NaNL 258.90625,NaNL 280.625,NaNL 302.34375,NaNL 324.0625,NaNL 345.78125,NaNL 367.5,NaNL 389.21875,NaNL 410.9375,NaNL 432.65625,NaNL 454.375,NaNL 476.09375,NaNL 497.8125,NaNL 519.53125,NaNL 541.25,NaNL 562.96875,NaNL 584.6875,NaNL 606.40625,NaNL 628.125,NaNL 649.84375,NaNL 671.5625,NaNL 693.28125,NaN"

The problem seems coming from the function Chartist.getBounds which returns NaN values but I won't have more time for investigating shortly.

-Simon

I'd love to have the ability to do dual y-axis on a graph (usually line or bar) so as to chart and overlay multiple data series on a single graph.

Hi,

In some of my graphs labels are really long and they are or too much close or they cover each other..
I would like to split them on different lines.

Is it possible?

It looks like the svg has been written after core. Therefore I think that

• Chartist.getHeight should be moved to Charitst.svg.height
• Chartist.getWidth should be moved to Charitst.svg.width
• Chartist.getAvailableHeight should be moved to Charitst.svg.availableHeight
• Chartist.projectLenght should be moved to Charitst.svg.projectLength (maybe inline getAvailableHeight there too?)
• Chartist.getBounds should be moved to Chartist.svg.bounds
  `

It would be nice to have hover data on PC and touch tooltips on mobile.

I absolutely admired Chartist, it is my suggestion that if you want more people to use it. Just try to put a simple example of a certain set of information (anything at your ease) and try to represent it into various charts and figures to explain the versatility of Chartist. people will instantly will pick up.

Would it be possible to return some sort of chart object that contains information related to the newly constructed chart?

For example, return the final values for the config objects that were passed in once they are merged with the defaults.

A little context for why I feel this would be good for 3rd party libs (and to make sure I'm not falling victim to the XY problem):

I am trying to find a way to handle events (e.g., click, mouseover, etc) in an angular way. The best way to do this, I think, would be as you suggested in #36 (comment), which is to use nested directives. If I were to go this route, it would require a lot more effort, but it would be the right way to go. I may explore this in a branch and get your feedback...perhaps this can be a dual endeavor. I would want to do this in such a way though that the entire library is not being re-written.

The other option is get the relevant elements and attach emitters (maybe, still working through this). But this presents it's own problems in that the class names can be changed by the user and I don't want to have logic in the directive to figure out whether or not this happened. This means that the directive would have to maintain knowledge about the default values, and if they change then I'd have to update the wrapper, etc. I'd rather just read off the final value from the config object.

Do you have any thoughts on this? I'm open to suggestions on the best way to get this done.

Thanks!

Hi!! Nice and clean charts!!

i was wondering, i'm using multiple linechart series on my data and i dunno how to identify each line
for each line is a diferent series, how can i label each line / colorline?

Data Example:

var data = {

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

    //my multiple series
    series: [
        //series1: label example: apples
        [5, 2, 4, 2, 0],
        //series1: label example: lemons
        [8, 1, 14, 12, 10],
    ]
};

all i got is:
http://oi60.tinypic.com/6q8fhv.jpg

but how do i identify each series?

thanks!!

Hello!

I copy-pasted the LINE CHART WITH TOOLTIPS section example but the tooltips are not showing above the points as it's in the example. They're showing at the upper left corner without any style, just text.
jQuery and jQuery-ui are both included.

Any more dependencies?

Thanks!

For whatever reason, [data-icon]:before will cancel out an Font Awesome icons used outside of the chart library.

Changing [data-icon]:before to .ct-chart [data-icon]:before fixes this.

I got a bug report on Safari 7 that Chartist charts are too big and grow outside their container div even if they have width and height set to 100%.

As we are using a non-standard approach for responsive containers (with pseudo elements causing the container to grow in height with padding-bottom), this seems to fail in Safari 7.

In the standard way a padding-bottom with percentage is used on the container together with height: 0 in order to create an aspect ratio constraint specified with padding-bottom / top in percentage. The drawback with this is that padding-top / padding-bottom is using the PARENT container width to calculate the value. This is kind of a limitation as you can't set a width other than 100% and this would need a nested container with two levels in order to make it clean.

In Chartist there is a special version of an aspect ratio container that makes use of a pseudo element to create the container. The pseudo element contains the padding-bottom in percentage and is expanding the parent container. The SVG element is then placed into the parent container with absolute positioning. The container can also have any width assigned as the height expansion is caused by the pseudo element which calculates it's height (with padding-bottom in percentage) from the container width (parent).

To reproduce I've created the following simple demo:

You can reproduce the problem in safari using the following snippets:

Standard way: http://jsbin.com/geleyo/1/edit

Non-standard way (pseudo element): http://jsbin.com/geleyo/2/edit

We should store the information in the DOM too. I guess some of this goes hand in hand with the accessibility work.

Like this it will even become easier for end users to create their own behavior on charts.

I know new chart types aren't a huge priority right now, but would really love to see horizontal bar/row charts added. Or documentation on how I might go about extending on my own :)

This looks like a really promising project and I would like to contribute.

Are there any coding standards, grunt tasks, tests, etc, that I should be thinking about?

I would gladly create a CONTRIBUTING.md file for others as well if you have any any specific criteria for contributing.

On http://gionkunz.github.io/chartist-js/api-documentation.html#method-chartistline

labelInterpolationFnc: function(value){return value;} should be labelInterpolationFnc: function(value){return value;},

First off, loving the simple and clean look (not to mention all the other cool features, current and planned).

Wondering if there were plans to do combo charts. I know that a bar/line (where you could have a couple of each on the same canvas) would be useful. Has any design been put in to this? I know there are complications with data ranges/etc, but a simple example would be something that shows "widgets built" for each period as bars, with a trend line as a line. Happy to perhaps start looking at doing it, but didn't want to step on any other efforts.

Again, great lib, great start. So nice and so clean.

I agree with you on all the project premises. Please make a Dart version of it.

In the README, number 4 states you would like better interfaces, like an Angular wrapper. Did you have any thoughts in mind on where these would go / where they would be listed? (I actually just wrote one, so this is partly a shameless plug lol)

But I do think it would be a good idea to have a list of wrappers that are available so people can find them easily.

Hey nice lib, I have a question. Is there anyway to make a line graph fill the full width of the chart?

Here is a pic of my graph.

Cheers

Hiya,

Congrats on the launch of chartist.js, it looks awesome! It's well timed too as I am currently looking at charting libraries to use for an upcoming project at the BBC.

Something i noticed playing with the demos, is that the charts are not very accessible. For example, the pie chart on the demos page is complete invisible to voiceover, a common screen reader. However, i think i can help :D

My job at the BBC is actually in the accessibility team (i found your library while looking for tools to build our new internal dashboard with!) so I was wondering if you would like a hand at improving the accessibility of your code.

I think I could offer the following:

1: I'm happy to take some of the examples, and attempt to rewrite them to be more accessible where possible.
2: I could write a user guide page on ensuring a11y
3: I could provide a case study / example for how accessible charting is being used in the real world.

I cannot promise anything timelines wise as the project i have in mind is yet to kick off, but i am really interested in helping.

In the mean time, i found this article: https://www.webkit.org/blog/3302/aria_and_accessibility_inspector/ i think it covers some of the simpler stuff that you guys could do today to make things a little better.

Please let me know what you think,

Cheers,

Jamie + Lion

Looking through the API I don't see anything exposed for this functionality. (For an example of what I am looking for, please check out the example at the bottom of this page - this is a stacked area chart, but conceptually they are similar)

Attempting to do this naively via CSS (by adding a fill to the line in question) only rendered the fill above or below the line.

Any plans to implement this functionality or perhaps provide an example for how this effect can be achieved?

Thanks in advance

Is it possible to use log scale? both on vertical and horizontal axis

I still didn't try this but I might use it for my next project, looks really awesome.

Hiya,

Documentation pages appear to use anchors rather than buttons for revealing hidden content. This slight semantic difference is important as by default OSX will not allow users to focus on links. Only buttons and form controls. (see: Control-F7 here https://developer.apple.com/library/mac/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXKeyboardShortcuts/OSXAXKeyboardShortcuts.html)

This is hopefully a quick win to change. I'm up for doing a pull request, but I am not sure how to get the documentation site running locally so i can work on it.

Cheers,

Jamie + Lion

Is there anyway to support multi-line labels at the moment? I'm hitting a dead end in populating a bar chart... I cannot simplify axis labels any further, and as a result, some xAxis labels are overlapping.

Hi,

I would like to use your chart in my project where I need to show about 20000 data points.
Can your chart handle it?

And is there a way to show flags(label) at specific data point?

Thanks.

The example Responsive charts configuration doesn't to work in Firefox 28 (Linux) and Firefox 30 (Windows). The x-axis names do not change dynamically responsive to the viewport size. But it works in Chrome.

Quick link to the source: https://github.com/gionkunz/chartist-js/blob/develop/source/site/code-snippets/simple-responsive-settings.js#L21-L38 (I do not see the problem, otherwise I had done a pull request)

When I tried to set a height as '100px' or '50%' it goes all cray cray and doesn't render. If I just do straight up height: 400 with no quotes or px, it works, but now we're stuck with pixels which is a problem with fluid design.

Try this:

// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
  height: '50%'

can I add some text to the chart pie??
I don't see any text api in the document

When I'm using Google Chrome, I can resize the window and the charts will scale accordingly, as you would expect.

When I'm using Firefox (latest version, which I believe is 32), the charts won't redraw if I resize the window. They seem to scale only once, when the page is being loaded.

If you have leading zeros in your chart array for a pie chart, then you'll get a weird result with a sliver and the pie looks like its off the screen. Or if you values are really disproportionate to one another you will get a similar result where there is a sliver of pie and the rest is above and cut off.

The following line is throwing an undefined is not a function error.

When $watching data for changes, the angular directive calls chart.detach(). This is where the error is being thrown.

We should enrich the SASS framework to build Chartist styles more easily. This could include the following things:

• Mixins to create most common animations on SVG CSS attributes
• Cleanup existing SCSS code
• Add more mobile specific things like swiping in containers with fixed width charts

Awesome library, but needs better guidelines, demos, examples for implementation.

Also, I am unable to make this work in my webpage, even though I've a div with the class setup.

Is there an option to round the corners for a donut chart that isn't a full 360 circle

Just look at the attached image (black slice, inner circle). This effect is on Chrome/MacOS only. No problems on FF/Windows.

Everything is already in place and in the sitedist there is a apidoc folder that is generated by a JSDoc generator. We should always use propper JSDoc comments on added code, even internal code, and at some point refactor the existing comments to JSDoc. For JSDoc it would be nice to create a theme / template at somepoint that matches the Chartist theme.

Hi! I'm using chartist v0.2.1 and using the "area" feature. I noticed that on some charts, it fills the entire label area like so:

It seems like it works when the labels match the points. For example, this chart renders fine:

Is this related to #25? Any suggestions?

It is all about SoC after all. Right?

Apart from that it will help a lot the newcomers to the project.

This graph looks silly:

The labels are too far right!

I couldn't find a way to line up the centre of the labels with the point. Is there a way to do this? If not, how tricky would it be to implement? It would be a good feature to have.

I'm trying implement the last chart from Advanced page (http://gionkunz.github.io/chartist-js/getting-started.html)

This is the code of page:

Chartist.Line('.ct-chart', {
  labels: ['1', '2', '3', '4', '5', '6'],
  series: [
    {
      name: 'Fibonacci sequence',
      data: [1, 2, 3, 5, 8, 13]
    },
    {
      name: 'Golden section',
      data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
    }
  ]
});

// $chart is set to a jQuery wrapper around the chart container div
var $toolTip = $chart
  .append('<div class="tooltip"></div>')
  .find('.tooltip')
  .hide();

$chart.on('mouseenter', '.ct-point', function() {
  var $point = $(this),
    value = $point.attr('ct:value'),
    seriesName = $point.parent().attr('ct:series-name');

  $point.animate({'stroke-width': '50px'}, 300, 'easeOutQuad');
  $toolTip.html(seriesName + '<br>' + value).show();
});

$chart.on('mouseleave', '.ct-point', function() {
  var $point = $(this);

  $point.animate({'stroke-width': '20px'}, 300, 'easeOutQuad');
  $toolTip.hide();
});

$chart.on('mousemove', function(event) {
  $toolTip.css({
    left: event.offsetX - $toolTip.width() / 2 - 10,
    top: event.offsetY - $toolTip.height() - 40
  });
});

I didn't understand this specific part: // $chart is set to a jQuery wrapper around the chart container div
Who is $chart?

hey! beautiful lib! congratz! Do you have any realtime examples? Thanks!