c3js / c3js/c3

Scale the entire chart

Open
#1,825 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

Hi,

It is useful for me to be able to "scale the entire chart":

Example:
If I am displaying the chart in a 200px square box, but I want to have C3 render it to a 400px square area with a scale of 0.5 (the formatting is slightly different: the graph is larger and the legend is smaller)

I have gotten it to work by applying the following code:

update `c3_chart_internal_fn.initWithData` and insert
`.style("transform", "scale("+config.data_scale+","+config.data_scale+")")` on line 257

update `c3_chart_internal_fn.getDefaultConfig = function () {` and insert
`data_scale: 1 ,` on line 1296

update `c3_chart_internal_fn.getCurrentWidth` and replace
`return config.size_width ? config.size_width : $$.getParentWidth();`
with
`return (config.size_width ? config.size_width : $$.getParentWidth())/config.data_scale;`

update `c3_chart_internal_fn.getCurrentHeight` and replace
`return h > 0 ? h : 320 / ($$.hasType('gauge') && !config.gauge_fullCircle ? 2 : 1);`
with
`return (h > 0 ? h : 320 / ($$.hasType('gauge') && !config.gauge_fullCircle ? 2 : 1))/config.data_scale;`

Note that my changes did not update/ alter the font size.. and if the idea is accepted, it may need to be done too.

Thanks!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.