Hide gridLines in Kendo UI Chart Angular 2

Question

I am using Kendo UI Chart with Angular 2, with the Chart by default grid lines are coming, but I want to hide it. I got the class from API which is "GridLines". but where to use it that I am not getting. and also I want to hide my X-Axis.

Coming Result:

Expected Result:

Code:

<kendo-chart>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [title]="{ text: 'Score' }" [min]="0" [max]="11" >
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>

    <kendo-chart-series-defaults type="bar">
        <kendo-chart-series-defaults-labels format="">
        </kendo-chart-series-defaults-labels>
    </kendo-chart-series-defaults>

    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item  [categories]="chartObject.skills">
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>

    <kendo-chart-series>
        <kendo-chart-series-item color="#337ab7" [data]="chartObject.rates" type="bar" [border]="{ width: 0 }">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

score 11 · Accepted Answer · edited Oct 18 '16 at 07:34

11

I hide grid lines like below:

<kendo-chart-axis-defaults [majorGridLines]="{ visible : false}">
</kendo-chart-axis-defaults>

To remove chart X-Axis :

<kendo-chart-value-axis>
    <kendo-chart-value-axis-item [line]="{visible:false}" labels="false">
    </kendo-chart-value-axis-item>
</kendo-chart-value-axis>

edited Oct 18 '16 at 07:34

Alex Gyoshev

11,929
4
44
74

answered Oct 17 '16 at 13:16

Chaitanya Chauhan

743
1
11
28

1

@alexGyoshev, Thanks for proper indentation. :) – Chaitanya Chauhan Oct 18 '16 at 09:24

score 0 · Answer 2 · edited Oct 18 '16 at 07:35

0

I achieved this by making changing property of a css class like following

.k-var--chart-major-lines {
    background-color:white;
}

edited Oct 18 '16 at 07:35

Alex Gyoshev

11,929
4
44
74

answered Oct 17 '16 at 14:43

RaghuS

103
1
12

Yes, indeed, we can achieve it but I wanted to know the Kendo UI approach. thanks for your Help. :) – Chaitanya Chauhan Oct 17 '16 at 15:28
While this will set the grid lines color, it is a better idea to use the provided SASS variables and compile the theme. This way, you can set `$chart-major-lines: #fff;` to modify the theme, instead of overriding it via CSS. – Alex Gyoshev Oct 18 '16 at 10:15
Yes now iam using SASS variables instead of overriding thanks for your help – RaghuS Oct 21 '16 at 04:26

Hide gridLines in Kendo UI Chart Angular 2

2 Answers2