Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the dot point color and style in Morris.js line graph?

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.

like image 793
kinakomochi Avatar asked Dec 26 '12 07:12

kinakomochi


2 Answers

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>
like image 125
vortexwolf Avatar answered Sep 30 '22 11:09

vortexwolf


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.

like image 33
Jakub Hadvig Avatar answered Sep 30 '22 13:09

Jakub Hadvig