I uses morris.js to draw line chart graph, but I can't figure out how to change just dot color and style in line chart. Does anyone know how to change just dot styles?
Thanks.
Use the pointFillColors
property.
From the documentation:
pointFillColors Colors for the series points. By default uses the same values as lineColors
Here is the example of the chart with blue line and green dots:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="morris.min.js"></script>
<script type="text/javascript">
function drawChart() {
Morris.Line({
element: 'chart',
data: [
{y: '2012', a: 100},
{y: '2011', a: 75},
{y: '2010', a: 50},
{y: '2009', a: 75},
{y: '2008', a: 50},
{y: '2007', a: 75},
{y: '2006', a: 100}
],
xkey: 'y',
ykeys: ['a'],
labels: ['Test series'],
lineColors: ['#0b62a4'],
pointFillColors: ['#00ff00']
});
}
window.onload = drawChart;
</script>
<div id="chart" style="width: 400px; height: 250px;"></div>
Instead of "lineColors", try "colors" like this:
function drawChart() {
Morris.Line({
element: 'chart',
data: [
{y: '2012', a: 100},
{y: '2011', a: 75},
{y: '2010', a: 50},
{y: '2009', a: 75},
{y: '2008', a: 50},
{y: '2007', a: 75},
{y: '2006', a: 100}
],
colors: ['#0b62a4','#D58665','#37619d','#fefefe','#A87D8E','#2D619C','#2D9C2F']
});
}
for every line there should be one color.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With