Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to pass arbitrary options to c3.generate #19

Open
phillipskevin opened this issue Mar 31, 2016 · 3 comments
Open

Add ability to pass arbitrary options to c3.generate #19

phillipskevin opened this issue Mar 31, 2016 · 3 comments
Assignees
Labels

Comments

@phillipskevin
Copy link
Contributor

I would like to be able to pass other options to this call: https://github.com/bitovi-components/bit-c3/blob/master/src/chart.js#L35.

Some example options that would be nice to be able to set are http://c3js.org/reference.html#axis-rotated and c3js/c3#188 (comment).

Not sure exactly how this would work, but it would make bit-c3 much more flexible.

@kylegifford
Copy link
Contributor

I agree, this would make the config a lot easier. A first implementation of this would probably just to listen for changes on this options object, and then call chart.flush() to redraw it with the new options. Could get expensive, though - eventually, it'd probably be better to parse the options and bind them using the C3 API.

@ilyavf
Copy link
Contributor

ilyavf commented May 27, 2016

+ Config data.onclick: http://c3js.org/reference.html#data-onclick

Still just experimenting with particular config options. For data.onclick probably dispatch custom viewModel event if onclick is true, smth like:

<bit-c3 onclick="true" (click)="clickHandler(%event)"></bit-c3>

@ilyavf
Copy link
Contributor

ilyavf commented Jul 12, 2016

Looks like almost all config properties are lower cased, except for couple (data.xFormat, data.xLocaltime, data.xSort). So we can translate camel-cased properties into nested object config:

var chart = c3.generate({
    ...
    size: {
        height: 80
    },
    legend: {
        show: false
    },
    axis: {
        x: {
            categories: ['Category 1', 'Category 2', ...]
        }
    }
});

can be achieved declaratively:

<bit-c3 size-height="80" legend-show="false" {axis-x-categories}="categories"/>

And we can observe the config and run chart.flush() as suggested by @kylegifford .

@ilyavf ilyavf self-assigned this Jul 12, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants