• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

SeriesType

The series type.

The supported values are:

  • "area"—Displays the data as continuous lines that show trends over time, evenly distributed along the category field.
  • "bar"—Displays the data as sets of horizontal bars that show the relationship between individual items and the whole category.
  • "boxPlot"—Displays the data as a box-and-whisker diagram, which shows the distribution of values in a series.
  • "bubble"—Displays the data as bubbles, where each bubble represents a value from the series data.
  • "bullet"—Displays the data as vertical bars that show the performance measure, and markers that show the comparative measure.
  • "candlestick"—Displays the data as candlesticks, which show the open, close, high, and low values of a series.
  • "column"—Displays the data as sets of vertical bars that show the relationship between individual items and the whole category.
  • "donut"—Displays the data as a series of rings that are sliced depending on the value.
  • "exponentialTrendline"—Displays an exponential trendline for the specified parent series.
  • "funnel"—Displays the data as a funnel, which is useful for sales data visualization.
  • "heatmap"—Displays the data as a heatmap, which is useful for comparing values in a matrix.
  • "horizontalWaterfall"—Displays the data as a horizontal waterfall chart, which is useful for comparing positive and negative values over a period.
  • "line"—Displays the data as continuous lines that connect data points evenly distributed along the category field.
  • "linearTrendline"—Displays a linear trendline for the specified parent series.
  • "logarithmicTrendline"—Displays a logarithmic trendline for the specified parent series.
  • "movingAverageTrendline"—Displays a moving average trendline for the specified parent series.
  • "ohlc"—Displays the data as OHLC (open-high-low-close) bars, which show the open, high, low, and close values of a series.
  • "pie"—Displays the data as a series of pie slices, which show the contribution of each value to a total.
  • "polarArea"—Displays the data as a series of polar area segments, which show the contribution of each value to a total.
  • "polarLine"—Displays the data as continuous lines that connect data points evenly distributed along the category field.
  • "polarScatter"—Displays the data as points distributed in a polar coordinate system.
  • "polynomialTrendline"—Displays a polynomial trendline for the specified parent series.
  • "powerTrendline"—Displays a power trendline for the specified parent series.
  • "pyramid"—Displays the data as a pyramid divided in segments proportional to each value.
  • "radarArea"—Displays the data as a series of radar area segments, which show the contribution of each value to a total.
  • "radarColumn"—Displays the data as sets of vertical bars that show the relationship between individual items and the whole category.
  • "radarLine"—Displays the data as continuous lines that connect data points evenly distributed along the category field.
  • "rangeArea"—Displays the data as a series of range area segments, which show the contribution of each value to a total.
  • "rangeBar"—Displays the data as sets of horizontal bars that show the relationship between individual items and the whole category.
  • "rangeColumn"—Displays the data as sets of vertical bars that show the relationship between individual items and the whole category.
  • "scatter"—Displays the data as points that show the relationship between two variables.
  • "scatterLine"—Displays the data as continuous lines that connect data points evenly distributed along the category field.
  • "verticalArea"—Displays the data as continuous lines that show trends over time, evenly distributed along the category field.
  • "verticalBoxPlot"—Displays the data as a box-and-whisker diagram, which shows the distribution of values in a series.
  • "verticalBullet"—Displays the data as vertical bars that show the performance measure, and markers that show the comparative measure.
  • "verticalLine"—Displays the data as continuous lines that connect data points evenly distributed along the category field.
  • "verticalRangeArea"—Displays the data as a series of range area segments, which show the contribution of each value to a total.
  • "waterfall"—Displays the data as a waterfall chart, which is useful for comparing positive and negative values over a period.
import {
 Chart,
 ChartSeries,
 ChartSeriesItem
} from '@progress/kendo-react-charts';

const data = [1, 2, 3];
const seriesType = "verticalLine";

const ChartContainer = () => (
 <Chart>
   <ChartSeries>
     <ChartSeriesItem type="line" data={data} type={seriesType} />
   </ChartSeries>
 </Chart>
);

ReactDOM.render(
 <ChartContainer />,
 document.querySelector('my-app')
);

type SeriesType = "area" | "bar" | "boxPlot" | "bubble" | "bullet" | "candlestick" | "column" | "donut" | "exponentialTrendline" | "funnel" | "pyramid" | "heatmap" | "horizontalWaterfall" | "line" | "linearTrendline" | "logarithmicTrendline" | "movingAverageTrendline" | "ohlc" | "pie" | "polarArea" | "polarLine" | "polarScatter" | "polynomialTrendline" | "powerTrendline" | "radarArea" | "radarColumn" | "radarLine" | "rangeArea" | "rangeBar" | "rangeColumn" | "scatter" | "scatterLine" | "verticalArea" | "verticalBoxPlot" | "verticalBullet" | "verticalLine" | "verticalRangeArea" | "waterfall";

In this article

Not finding the help you need?