Styling point marker on Area Chart

[Ryan]

Hi, i need to make those markers bigger, because if i use majorGridlines in the categoryAxis which are very wide, the marker is behind it and can't be seen so i would need some way to change it's z-index i tried doing it manualy but couldn't. I'll upload a screenshot in case you don't know what i'm talking about. Thanks in advance!.

[EZ]

Use the markers object of the series or seriesDefaults. In particular marker.size

 

markers: {
    size: 20
},

 DEMO

[Ryan]

Thanks a lot[quote]EZ said:

Use the markers object of the series or seriesDefaults. In particular marker.size

 

markers: {
    size: 20
},

 

 DEMO

[/quote]

Thanks a lot EZ, certainly the answer is in the markers object, the sized definitely helped, but i still have the Z-Index issue, i'll attach an image of the actual chart since i can't reproduce it in the kendo dojo. Is there any way to make it appear in front of the majorGridlines and not in the back?. Thanks in advance!.

[EZ]

Can you show us your code for generating the chart? I can't make the majorgridlines go in front of the series...

 In SVG there is no z-index property, instead elements obey the order they are added to the SVGDOM element.

[Ryan]

Sure, this is the chart and the variables i use, sorry i don't know how to format the codeblock. 

        <div kendo-chart
             k-data-source="dataSource"
             k-legend="legend"
             k-series-defaults="seriesDefaults"
             k-series="series"
             k-category-axis="categoryAxis"
             k-value-axis="valueAxis"
             k-tooltip="tooltip"
             k-panes="panes"
             class="chart risk-management-chart">
        </div>

            var chartColors = {
                lightBlue: '#0394FD',
                gray: '#D5D5D5',
                white: '#FFFFFF',
                black: '#000000'
            };

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        cache: false,
                        url: getDataSource(scope.serviceName)
                    }
                }
            });

            scope.dataSource = dataSource;

            scope.legend = {
                position: 'custom',
                visible: true,
                orientation: 'horizontal',
                offsetX: 235,
                offsetY: 240
            };

            scope.panes = [
                {
                    margin: {
                        top: 20
                    },
                    name: 'top-pane',
                    clip: false,
                    height: 230
                },
                {
                    name: 'bottom-pane',
                    height: 60
                }
            ];
            
            scope.seriesDefaults = {
                type: 'area',
                labels: {
                    visible: false,
                    opacity: 1,
                    background: chartColors.white,
                    border: {
                        opacity: 1,
                        width: 0.5,
                        color: graphValueLabelBorderColor
                    }
                },
                markers: {
                    size: 20
                },
                opacity: 1
            };

            scope.series = [
                {
                    field: 'InherentRisk',
                    name: 'Inherent Risk',
                    missingValues: 'zero',
                    color: chartColors.lightBlue
                },
                {
                    field: 'ResidualRisk',
                    name: 'Residual Risk',
                    missingValues: 'zero',
                    color: chartColors.gray
                }
            ];

            scope.tooltip = {
                visible: true,
                template: "Risk Score: #: value # <br/> From #: dataItem.AssessmentCount # assessments"
            }

            scope.categoryAxis = {
                field: 'Month',
                baseUnit: 'months',
                pane: 'bottom-pane',
                background: chartColors.white,
                line: { visible: false },
                labels: {
                    padding: { left: 20, right: 20 },
                    margin: {  bottom: 10 },
                    color: chartColors.lightBlue,
                    font: "12px Source Sans Pro,sans-serif",
                    template: "#: kendo.toString(kendo.parseDate(value, 'yyyy-MM-dd'), 'MMM').toUpperCase() + ' ' + kendo.toString(kendo.parseDate(value, 'yyyy-MM-dd'), 'yy') #"
                },
                minorGridLines: { visible: false },
                majorGridLines: {
                    visible: true,
                    color: chartColors.white,
                    width: 5
                },
            };

            scope.valueAxis = [{
                visible: false,
                majorGridLines: { visible: false }
            }];

[EZ]

It is because you have created panes and assigned the category axis to the bottom pane.  What are you trying to accomplish with the panes in this scenario?

[Ryan]

[quote]EZ said:It is because you have created panes and assigned the category axis to the bottom pane.  What are you trying to accomplish with the panes in this scenario?[/quote]

Thanks EZ!, i've been fiddling with the panes and achieved the result i wanted. I didn't answer yesterday couse i was busy trying stuff. Thanks again you have been very helpful.