Usando el gráfico de líneas KendoUI, ¿cómo hacer que los marcadores de datos (puntos) tengan un color sólido?

Question

Estoy usando la interfaz de usuario de Kendo para reemplazar un gráfico existente. Necesito minimizar los cambios entre los gráficos. ¿Alguien sabe cómo hacer que los puntos en el Line Chart sean sólidos? ¿Es posible hacer la línea más delgada?

Esta es mi imagen de mi carta:

Aquí es mi proyecto jsFiddle si quiere jugar con él: http://jsfiddle.net/rodneyhickman/uMTnh/2/

Mi html se ve así:

<div id='chart' ></div> 

Mi script jQuery se parece a:

jQuery('#chart').kendoChart({ 
    title: { 
     text: "Overall Score out of 100", 
     align: "left", 
     font: "18px Arial, Verdana, sans-serif", 
     color: "#444" 
    }, 
    seriesDefaults: { 
     type: "line", 
     missingValues: "interpolate", 

    }, 
    legend: { 
     position: "bottom" 
    }, 
    tooltip: { 
     visible: true, 
     format: "{0}%" 
    }, 
    valueAxis: { 
     min: 70, 
     max: 85, 
     plotBands: [{ 
      from: 70, 
      to: 75, 
      color: "#EDF5FF"}, 
     { 
      from: 80, 
      to: 85, 
      color: "#EDF5FF"}] 
    }, 
    series: [{ 
     name: "Some Product", 
     color: "004990", 
     tooltip: { 
      visible: true, 
      template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # " 
     }, 
     data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]}, 
    { 
     name: "Some Market Segmemt", 
     color: "da7633", 
     tooltip: { 
      visible: true, 
      template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # " 
     }, 
     data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}], 
    categoryAxis: { 
     labels: { 
      rotation: -45, 
      step: 1, 
      skip: 0 
     }, 
     categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"] 
    } 
}); 

Cualquier ayuda sería apreciada.

Answer 1

En la serie Objeto Use marcadores: {background: "# 004990"}, // Use el color de fondo.

Para configurar el tamaño de la barra también use el ancho : propiedad 1.

Aquí está la solución jsFiddle se puede jugar con: http://jsfiddle.net/rodneyhickman/uMTnh/3/

Aquí es la imagen resultante:

El nuevo script jQuery parece:

jQuery('#chart').kendoChart({ 
    title: { 
     text: "Overall Score out of 100", 
     align: "left", 
     font: "18px Arial, Verdana, sans-serif", 
     color: "#444" 
    }, 
    seriesDefaults: { 
     type: "line", 
     missingValues: "interpolate" 

    }, 
    legend: { 
     position: "bottom" 
    }, 
    tooltip: { 
     visible: true, 
     format: "{0}%" 
    }, 
    valueAxis: { 
     min: 70, 
     max: 85, 
     plotBands: [{ 
      from: 70, 
      to: 75, 
      color: "#EDF5FF"}, 
     { 
      from: 80, 
      to: 85, 
      color: "#EDF5FF"}] 
    }, 
    series: [{ 
     name: "Some Product", 
     color: "004990", 
     width: 1, 
     markers: { background: "#004990" }, 
     size: 2, 
     tooltip: { 
      visible: true, 
      template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # " 
     }, 
     data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]}, 
    { 
     name: "Some Market Segmemt", 
     color: "da7633", 
     width: 1, 
     markers: { background: "#da7633" }, 
     tooltip: { 
      visible: true, 
      template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # " 
     }, 
     data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}], 
    categoryAxis: { 
     labels: { 
      rotation: -45, 
      step: 1, 
      skip: 0 
     }, 
     categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"] 
    } 
});