Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/charts/get-started below:

React Charts Getting Started - KendoReact

This guide provides information about using the KendoReact Charts—you will learn how to install the package, add a Chart component to your project, style the component, and activate your license. The steps in this guide are applicable to all components in the Charts package.

After completing this guide, you will be able to reproduce the following example.

npm create vite@latest my-app -- --template react

This guide requires that you have basic knowledge of React and TypeScript, and that you have already created a blank React project.

You can speed up the development of your KendoReact application with the Kendo UI Template Wizard for Visual Studio Code.

npm i @progress/kendo-react-charts

After installing the Charts package, import the desired components in the React App. In this guide, you will add data series to the Chart, and this requires you to import the ChartSeries collection and the ChartSeriesItem configuration component.

In the App component file of your React project (for example, src/App.js), add the following code:

import { Chart, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';

const { Chart, ChartSeries, ChartSeriesItem } = require('@progress/kendo-react-charts');

If your project requires additional components from the Charts package, you can import them too. The Charts package exports the following components:

• Chart
• Sparkline
• StockChart

1. After installing the Charts package and importing the components, add the Chart tags to the App component file of your React project (for example, src/App.js).

   
   const data = [1, 2, 3, 5, 8, 13];
   
   const App = () => (
       <Chart>
           <ChartSeries>
               <ChartSeriesItem data={data} name="Fibonacci" />
           </ChartSeries>
       </Chart>
   );
   
   export default App;

2. To style the Chart, install and import the Default theme, which is one of the three beautiful themes for KendoReact.

   2.1. Install the Default theme package.

   npm i @progress/kendo-theme-default

   2.2. Import the CSS file from the package in src/App.js. Add this import before your existing App.css import.

   import '@progress/kendo-theme-default/dist/all.css';

3. Build and run the application by typing the following command in the root folder of your project:

4. Navigate to http://localhost:3000 to see the KendoReact Chart component on the page.

Now try to add another component from the Charts package yourself. The procedures for installing, importing, and using the Charts are identical for all components in the package.

KendoReact is an enterprise-grade UI library with 120+ free and premium components. You can use the 50+ free components and features of KendoReact, even in production, no license required.

Important: The KendoReact Charts are premium components that require a license key file to be installed in your project. This applies to both trial and commercial usage:

• Trial usage: Start a free trial and download a trial license key file
• Commercial usage: Purchase a license and download a commercial license key file

Without a valid license key file, the components will display licensing warnings and watermarks.

Follow the instructions on the KendoReact My License page to download and install your license key file. You can skip this step if your application already contains a KendoReact license file.

The Charts package requires you to install the following peer dependencies in your application:

The following dependencies are automatically installed:

With this 10-minute video tutorial, you’ll learn how to implement a good-looking chart that is customized with animations, custom axes, tooltips, a title and chart legend with just a few lines of code. You’ll also see how to connect your React charts to a data set.

• React Charts Tutorial with the KendoReact Chart Library

To quickly scaffold a KendoReact Chart, you can use the Kendo UI Template Wizard for Visual Studio Code. The template allows you to add a Chart to your application with a single click. It also lets you customize your application with one of the KendoReact themes. Read more about the Kendo UI Template Wizard for Visual Studio Code...

• Chart Overview
• Sparkline Overview
• StockChart Overview
• Series Types of the Chart
• API Reference of the Charts
• Glossary

• Getting Started with KendoReact
• Virtual Classroom (Introductory Course Available to Trial and Commercial License Holders)
• Explore the Finance Portfolio Sample Application
• Explore the Coffee Warehouse Sample Application
• Explore the Github Issues Grid Sample Application
• KendoReact Charts

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4