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 responsive options to this plugin (example code added) #22

Open
bayareacoder opened this issue Jun 23, 2022 · 0 comments
Open

add responsive options to this plugin (example code added) #22

bayareacoder opened this issue Jun 23, 2022 · 0 comments

Comments

@bayareacoder
Copy link

bayareacoder commented Jun 23, 2022

In addition to #1 which is now added (and which I needed since data is loaded from a database and I use a value of this data to show as item.content in this plugin, so plugin options need to update on a chart update once db data is loaded), it would also be useful to have responsive options with this plugin, as you have with Chartist itself.
In my case I needed this to leave out some legend text on smaller screen.
I added it myself to the source as follows, similar as how it is done in the chartist source:

chart.on("created", function (data) {
          var itemIndex = 0;

          if (chart.options.fillDonutOptions) {
            options = Chartist.extend(
              {},
              options,
              chart.options.fillDonutOptions
            );
            // ADDED TO ALSO INCLUDE RESPONSIVE OPTIONS FOR FILL DONUT
            if (chart.options.responsiveFillDonutOptions) {
              for (var i = 0; i < chart.options.responsiveFillDonutOptions.length; i++) {
                var mql = window.matchMedia(chart.options.responsiveFillDonutOptions[i][0]);
                if (mql.matches) {
                  options = Chartist.extend({}, options, chart.options.responsiveFillDonutOptions[i][1]);
                }
              }
            }
            drawDonut(data);
          }

This then needs to be called as follows (I'm using React with the react-chartist wrapper). The responsive options for the given media query will override the regular options:

const responsiveFillDonutOptions = [
    [
      "screen and (max-width: 768px)",
      {
        items: [ <items you want to show on smaller screen> ],
      },
    ],
  ];

  const fillDonutOptions = {
    items: [ <items you want to show on larger screen> ],
  };

  const options = {
    donut: true,
    donutWidth: 10,
    startAngle: 190,
    total: max - min,
    showLabel: false,
    plugins: [Chartist.plugins?.fillDonut?.(fillDonutOptions)],
    fillDonutOptions,
    responsiveFillDonutOptions,
  };

This works but the API is not so elegant since there is also a responsiveOptions (as a prop for ReactChartist in react-chartist), but that's only for chartist, not the plugin:

        <ReactChartist
          // chart data (required)
          data={data}
          // chart options (optional)
          options={options}
          // chart type (required)
          type={type}
          // chart responsive options (optional)
          // responsiveOptions={responsiveOptions}
          // set callbacks for animations using a listener, see: https://github.com/fraserxu/react-chartist/issues/27
          listener={animation}
        />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant