简体   繁体   中英

How can I change the bar color of a kendo sparkline for Angular 2+

I have a kendo sparkline, bullet graph for angular 2. The default color of the bar is orange, but I need to change the color. I have looked at the reference on the progress site and it appears that there is a color property for the value axis, but when I try and change this the bar disappears.

html

    <kendo-sparkline [data]="Data" type="bullet" [valueAxis]="bulletValueAxis">
    </kendo-sparkline>

.ts file - value axis

        this.bulletValueAxis = {
        min: 0,
        max: 30,
        color: 'purple',
        background: 'grey',
        // title: { text: 'test' },
        type: 'numeric',
        plotBands: [{
            from: 0, to: this.config.min, color: 'yellow', opacity: 0.3
        }, {
            from: this.config.min, to: this.config.max, color: '#008b00', opacity: 0.3
        }, {
            from: this.config.max, to: this.config.max + 5, color: '#ff0000', opacity: 0.3
        }]
    };

The color property is part of the series or seriesDefaults configuration (as opposed to the valueAxis one), eg:

<kendo-sparkline [data]="bulletData" type="bullet" [seriesDefaults]="{color: 'purple'}" [valueAxis]="bulletValueAxis">

EXAMPLE

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM