Ali Jamal Ali Jamal - 3 months ago 22
Javascript Question

Why does AmCharts export change color to black and white?

I am using AmCharts and everything is working perfect except for Export.

I am using the following libraries for AmCharts:

<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" media="all" rel="stylesheet" type="text/css" />
<script src="~/Content/amcharts_3.20.9.free/amcharts/amcharts.js"></script>
<script src="~/Content/amcharts_3.20.9.free/amcharts/serial.js"></script>
<script src="~/Content/amcharts_3.20.9.free/amcharts/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>


and inside
AmCharts.makeChart("chartdiv2", {
I am using:

"export": {
"enabled": true
}`


My chart is colorful like this by default:

Colorful Chart

But after I download to PDF, PNG, JPG etc or click
Annotate...
menu option the chart turns to Black and White (Grayscale) like this image:

Greyscaled Chart

Here is video of this issue reproduced.



var chartData = generateChartData();

var chart = AmCharts.makeChart("chartdiv2", {

"type": "serial",
"theme": "light",
"legend": {
"useGraphSettings": true
},
"dataProvider": chartData,
"valueAxes": [{
"id": "HeartRate",
"axisColor": "Green",
"axisThickness": 2,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "left",
"offset": 50,
}, {
"id": "BloodPressure",
"axisColor": "Purple",
"axisThickness": 2,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "left"
}, {
"id": "Temperature",
"axisColor": "Black",
"axisThickness": 2,
"gridAlpha": 0,
"offset": 0,
"axisAlpha": 1,
"position": "right"
},
{
"id": "RespiratoryRate",
"axisColor": "Gold",
"axisThickness": 2,
"gridAlpha": 0,
"offset": 50,
"axisAlpha": 1,
"position": "right"
},
{
"id": "Weight",
"axisColor": "Orange",
"axisThickness": 2,
"gridAlpha": 0,
"offset": 100,
"axisAlpha": 1,
"position": "right"
},
{
"id": "Age",
"axisColor": "LightSeaGreen",
"axisThickness": 2,
"gridAlpha": 0,
"offset": 150,
"axisAlpha": 1,
"position": "right"
}],
"graphs": [{
"valueAxis": "BloodPressure",
"lineColor": "Purple",
"bullet": "triangleUp",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "BloodPressureSystolic",
"valueField": "BloodPressureSystolic",
"fillAlphas": 0
},
{
"valueAxis": "BloodPressure",
"lineColor": "MediumPurple",
"bullet": "triangleDown",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "BloodPressureDiastolic",
"valueField": "BloodPressureDiastolic",
"fillAlphas": 0
}, {
"valueAxis": "HeartRate",
"lineColor": "Green",
"bullet": "round",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "Pulse",
"valueField": "Pulse",
"fillAlphas": 0
},
{
"valueAxis": "Temperature",
"lineColor": "Black",
"bullet": "bubble",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "Temperature",
"valueField": "Temperature",
"fillAlphas": 0
},
{
"valueAxis": "RespiratoryRate",
"lineColor": "Gold",
"bullet": "square",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "RespiratoryRate",
"valueField": "RespiratoryRate",
"fillAlphas": 0
},
{
"valueAxis": "Weight",
"lineColor": "Orange",
"bullet": "diamond",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "Weight",
"valueField": "Weight",
"fillAlphas": 0
},
{
"valueAxis": "Age",
"lineColor": "LightSeaGreen",
"bullet": "diamond",
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "Age",
"valueField": "Age",
"fillAlphas": 0
}],
"chartScrollbar": {},
"chartCursor": {
"cursorPosition": "mouse",
"valueLineBalloonEnabled": true,
"valueLineEnabled": true
},
"categoryField": "RecordedDate",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true
},
"export": {
"enabled": true
}
});

chart.addListener("dataUpdated", zoomChart);
zoomChart();

// generate some random data, quite different range
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 100);


chartData=[
//date: newDate,
//visits: visits,
//hits: hits,
//views: views

{
"RecordedDate": moment("26/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(),
"Temperature": 98,
"Pulse": 100,
"BloodPressureSystolic": 120,
"BloodPressureDiastolic": 98,
"RespiratoryRate": 15,
"Weight": 50,
"Age": 18
},


{
"RecordedDate": moment("27/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(),
"Temperature": 99.4,
"Pulse": 101,
"BloodPressureSystolic": 110,
"BloodPressureDiastolic": 112,
"RespiratoryRate": 98,
"Weight": 60,
"Age": 19
},


{
"RecordedDate": moment("28/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(),
"Temperature": 100,
"Pulse": 102,
"BloodPressureSystolic": 109,
"BloodPressureDiastolic": 95,
"RespiratoryRate": 97,
"Weight": 66,
"Age": 20
}

]

return chartData;
}

function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}

#chartdiv2 {
width : 100%;
height : 500px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/>

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>

<div id="chartdiv2"></div>





And JSFiddle of the issue.

I have test this behavior in both Google's Chrome and Mozilla's Firefox
Please guide me how can I modify this question to make it more understandable? I have searched a lot but could not find similar issue on the web. I would really appreciate if amcharts.com Support also participates in helping out.

Answer

as @gerric Suggested

This seems to be bug with the export plugin. It looks like the colors aren't recognized properly. If you change all colors to lower case the "standard" colors (like e.g. orange) work. You can fix this using HEX color codes by now.

I tried to change color names Green to green few of the color worked

Then I tried HEX as mentioned below and its working

var chartData = generateChartData();

var chart = AmCharts.makeChart("chartdiv2", {

  "type": "serial",
  "theme": "light",
  "legend": {
    "useGraphSettings": true
  },
  "dataProvider": chartData,
  "valueAxes": [{
    "id": "HeartRate",
    "axisColor": "#00ff00",
    "axisThickness": 2,
    "gridAlpha": 0,
    "axisAlpha": 1,
    "position": "left",
    "offset": 50,
  }, {
    "id": "BloodPressure",
    "axisColor": "#551a8b",
    "axisThickness": 2,
    "gridAlpha": 0,
    "axisAlpha": 1,
    "position": "left"
  }, {
    "id": "Temperature",
    "axisColor": "#000000",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 0,
    "axisAlpha": 1,
    "position": "right"
  }, {
    "id": "RespiratoryRate",
    "axisColor": "#ffd700",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 50,
    "axisAlpha": 1,
    "position": "right"
  }, {
    "id": "Weight",
    "axisColor": "#ffa500",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 100,
    "axisAlpha": 1,
    "position": "right"
  }, {
    "id": "Age",
    "axisColor": "#20b2aa",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 150,
    "axisAlpha": 1,
    "position": "right"
  }],
  "graphs": [{
    "valueAxis": "bloodpressure",
    "lineColor": "#551a8b",
    "bullet": "triangleUp",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "BloodPressureSystolic",
    "valueField": "BloodPressureSystolic",
    "fillAlphas": 0
  }, {
    "valueAxis": "BloodPressure",
    "lineColor": "#9370db",
    "bullet": "triangleDown",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "BloodPressureDiastolic",
    "valueField": "BloodPressureDiastolic",
    "fillAlphas": 0
  }, {
    "valueAxis": "HeartRate",
    "lineColor": "#00ff00",
    "bullet": "round",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "Pulse",
    "valueField": "Pulse",
    "fillAlphas": 0
  }, {
    "valueAxis": "Temperature",
    "lineColor": "#000000",
    "bullet": "bubble",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "Temperature",
    "valueField": "Temperature",
    "fillAlphas": 0
  }, {
    "valueAxis": "RespiratoryRate",
    "lineColor": "#ffd700",
    "bullet": "square",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "RespiratoryRate",
    "valueField": "RespiratoryRate",
    "fillAlphas": 0
  }, {
    "valueAxis": "Weight",
    "lineColor": "#ffa500",
    "bullet": "diamond",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "Weight",
    "valueField": "Weight",
    "fillAlphas": 0
  }, {
    "valueAxis": "Age",
    "lineColor": "#20b2aa",
    "bullet": "diamond",
    "bulletBorderThickness": 1,
    "hideBulletsCount": 30,
    "title": "Age",
    "valueField": "Age",
    "fillAlphas": 0
  }],
  "chartScrollbar": {},
  "chartCursor": {
    "cursorPosition": "mouse",
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true
  },
  "categoryField": "RecordedDate",
  "categoryAxis": {
    "parseDates": true,
    "axisColor": "#DADADA",
    "minorGridEnabled": true
  },
  "export": {
    "enabled": true
  }
});

chart.addListener("dataUpdated", zoomChart);
zoomChart();

// generate some random data, quite different range
function generateChartData() {
  var chartData = [];
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 100);


  chartData = [
    //date: newDate,
    //visits: visits,
    //hits: hits,
    //views: views

    {
      "RecordedDate": moment("26/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(),
      "Temperature": 98,
      "Pulse": 100,
      "BloodPressureSystolic": 120,
      "BloodPressureDiastolic": 98,
      "RespiratoryRate": 15,
      "Weight": 50,
      "Age": 18
    },


    {
      "RecordedDate": moment("27/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(),
      "Temperature": 99.4,
      "Pulse": 101,
      "BloodPressureSystolic": 110,
      "BloodPressureDiastolic": 112,
      "RespiratoryRate": 98,
      "Weight": 60,
      "Age": 19
    },


    {
      "RecordedDate": moment("28/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(),
      "Temperature": 100,
      "Pulse": 102,
      "BloodPressureSystolic": 109,
      "BloodPressureDiastolic": 95,
      "RespiratoryRate": 97,
      "Weight": 66,
      "Age": 20
    }

  ]

  return chartData;
}

function zoomChart() {
  chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}
#chartdiv2 {
  width: 100%;
  height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" />
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<div id="chartdiv2"></div>

I just received message from amCharts support against my ticket according to him they are not supporting color names with default library but asked me to used hexidecimal colors here is message for detail

Hi Ali,

You need to use hexidecimal colors ("#ff0000")or rgb ("rgb(255, 0, 0)" values for your colors. fabric.js, the underlying library used by the export plugin, does not support named colors such as "Orange" and "Black".

Here's your updated fiddle: https://jsfiddle.net/6w4wkqgs/5/

Hope this helps.

Thank You everyone for helping sorting out the issue. You people are great.

Comments