You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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}
/>
The text was updated successfully, but these errors were encountered:
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:
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:
This works but the API is not so elegant since there is also a
responsiveOptions
(as a prop forReactChartist
inreact-chartist
), but that's only for chartist, not the plugin:The text was updated successfully, but these errors were encountered: