New to Kendo UI for jQuery? Start a free 30-day trial

Series.pattern

configuration

The configuration options of the series pattern.

The pattern inherits the series.color as main color and accepts an optional background color.

series.pattern

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'crosshatch',
      background: 'rgba(170, 170, 170, 0.8)',
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.background

String

The background color of the pattern.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'dots',
      background: 'rgba(170, 170, 170, 0.8)',
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.color

String

The color of the pattern. Defaults to series color.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'dots',
      color: '#f00'
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.gap

Number

The gap between the elements of the pattern.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'grid',
      gap: 10
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.radius

Number

The radius of the dots. Applicable only for the "dots" pattern.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'dots',
      radius: 5
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.size

Number

The size of the squares in the grid. Applicable only for the "grid" pattern.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'grid',
      size: 6,
      gap: 2
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.type

String

The chart series pattern.

The supported values are:

"crosshatch"
"diagonalStripes"
"dots"
"grid"
"verticalStripes"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'dots'
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>

series.pattern.width

Number

The width of the lines. Applicable for the "crosshatch", "diagonalStripes" and "verticalStripes" patterns.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    pattern: {
      type: 'diagonalStripes',
      width: 2,
      gap: 4
    },
    data: [ 1, 2, 3 ]
  }]
});
</script>