score:2
Accepted answer
yes -- chartjs/react-chartjs-2 does support this. in order to do this, you need to:
- import/register the chart.js
filler
plugin (mentioned in the docs for area charts) - set the
tension
of the line (to make the lines curve), and; - set the
fill
options for the dataset.
following these steps this will produce:
for example:
import react from "react";
import { line } from "react-chartjs-2";
import {
chart as chartjs,
categoryscale,
linearscale,
pointelement,
lineelement,
title,
tooltip,
legend,
filler // 1. import filler plugin
} from "chart.js";
import faker from "faker";
chartjs.register(
categoryscale,
linearscale,
pointelement,
lineelement,
title,
tooltip,
legend,
filler // 1. register filler plugin
);
export const options = {
responsive: true,
tension: 0.3 // 2. set the tension (curvature) of the line to your liking. (you may want to lower this a smidge.)
};
const labels = ["january", "february", "march", "april", "may", "june", "july"];
export const data = {
labels,
datasets: [
{
label: "dataset 1",
data: labels.map(() => faker.datatype.number({ min: 0, max: 500 })),
bordercolor: "rgb(255, 99, 132)",
backgroundcolor: "rgba(255, 0, 0)",
fill: {
target: "origin", // 3. set the fill options
above: "rgba(255, 0, 0, 0.3)"
}
},
{
label: "dataset 2",
data: labels.map(() => faker.datatype.number({ min: 0, max: 500 })),
bordercolor: "rgb(53, 162, 235)",
backgroundcolor: "rgba(53, 162, 235, 0.3)",
fill: "origin" // 3. set the fill options
}
]
};
export function app() {
return <line options={options} data={data} />;
}
working codesanbox: https://codesandbox.io/s/chartjs-area-chart-p1o023?file=/app.tsx:817-846
Source: stackoverflow.com
Related Query
- Styling background (fill) with ChartJs and React
- How can I define a background image to fill the screen and remove edges on the left and right in React with Material UI?
- React Navigation switching background colors and styling StackNavigator
- React Native - text with background and a gap between multiple lines
- Change page background color with each route using ReactJS and React Router?
- Graph streaming real-time data with react and chartjs
- Background image with JS React and Semantic-ui
- Fill context from REST API and use it in a React component with useEffect and useContext
- Use dynamically created react components and fill with state values
- Header background image disappear and fade away on scroll with bottom gradient in React app
- Changing background image using useState and onClick with React
- Styling an element with JavaScript in react and typescript
- How to make an svg image as a background image with react and Tailwind css?
- react rollup no styling with tailwind css and css
- React Add/Remove and Toggle Class of Sidebar with background overlay
- object-contain / fill does not work with react and tailwind
- How to test a className with the Jest and React testing library
- Add Favicon with React and Webpack
- SyntaxError with Jest and React and importing CSS files
- How to import CSS modules with Typescript, React and Webpack
- How to mock React component methods with jest and enzyme
- How to set up Babel 6 stage 0 with React and Webpack
- Form validation with react and material-ui
- Formatting code with <pre> tag in React and JSX
- How to apply CSS and Styling to a React component
- Multiple classNames with CSS Modules and React
- React img tag issue with url and class
- Using onBlur with JSX and React
- How do I store JWT and send them with every request using react
- Async validation with Formik, Yup and React
More Query from same tag
- React observable epic with Redux Toolkit and Typescript
- React D3 Linechart component implementation error
- Typeerror: this.checkPositions is not a function React
- Zoom api respons with wrong date on creating meetings
- How to stop the for loop inside useEffect in react js?
- What's a react.js-friendly way to animate a list-reordering?
- React tests are passing with incorrect props
- How do I get the decimal in the right place with mongoose-currency?
- when i use mobx with react-router here is a warning
- How handle multiple select form in ReactJS
- upload froala images on s3
- Proper way of passing asynchronous data in nextjs to pages
- WebpackError: TypeError: Cannot read property 'map' of undefined during Gatsby build
- Why can't I display the contents of an api in the console (getting 401 error)?
- How to modify array within object in react component state
- Callback or setState when path is loaded
- Blog website with Rails and React: Trying to send a fetched object to another component
- React colspan not working
- Test input Search box with React testing library
- TailwindCSS in Create-React-App project, error requires PostCSS 8
- Can I make api calls inside React Provider?
- Add click event to render props?
- Using multiple contexts in React JS
- I can't fetch the data from reducer to component
- Fetching JSON data array, how to use it with React Bootstrap Table?
- react difference between class method and file global function?
- Passing header parameters while loading Video in VideoJs
- CSS Modules aren't being loaded for React App
- how to handle multiple button click in react, to know which is clicked
- ReactJs if div contains className set negative tabindex to childrens