Javascript highchart display User defined colors on pie

@Sina123Aug 11.2019

Hello I am working with highchart with Javascript and currently struggling with some requirements. I have an existing highchart which generates pie and bar charts.it takes some default colors. But now I need to assign color depending on the column of a table for which the pie or bar chart is generated. For example suppose a table has 2 columns Fruits and Vegetables. In fruits there is Apple orange and vegetables has potato and cucumber. The chart for fruits column should be colored red for apple field and orange for orange. Likewise chart for vegetables should be colored brown for potato and green for cucumber. Since the data is dynamic and its in an array I am just not able to do the right mapping. I tried to pass it as a json in ‘colors’ attribute of highchart, tried to explicitly give name and color in the data field od ‘series’ attribute of highchart. But nothing worked. Can anyone advise. Thanks in advance.

Also one more point I also need to resize the pie which is loaded inside an iframe. As the size of iframe is increasing the pie size also should increase. I tried this too with some code search in Google but in vain.

to post a comment

JavaScript

40 Comments(s) _↴

@SempervivumAug 11.2019 — #Difficult to answer without viewing the code. I found this on stackoverflow:

https://stackoverflow.com/questions/7414287/how-do-you-change-the-colour-of-each-category-within-a-highcharts-column-chart

but obviously you have already tried the solutions given there.

Is it possible for you to post the url of the chart or, if not possible, a demo showing the issue?

Regarding displaying the chart in an iframe: I created a quick demo based on the pie chart of the citys on the website of Highcharts and the chart is adjusting it's size to the size of the iframe when the css of the container is set properly.

@Sina123authorAug 12.2019 — #Sorry i can just show how the pie looks like . In place of the colors below like gray blue yellow etc i want meaningful colors that i can specify in the code for the chart, for example in the below code i tried within plotOptions:

var chartData = {
 colors: [
 "#32456C",
 "#009A8F",
 "#FABE00",
 ....
 ],
 chart: { renderTo: "displayarea", backgroundColor: "transparent" },
 title: { text: key },
 xAxis: {},
 plotOptions: {
 line: { dataLabels: { enabled: false }, enableMouseTracking: true },
 series: { animation: false , data: [{ name:"Apple", color: "#FFFF00"}, {name: "Orange",color: "#FF0000"}]},
 
 <i>    </i>    };

But this does not give the desired output.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-12/1565594102-697168-image.png]

Hope this helps in giving an idea of what is required.

Edited by site staff: Inserted code tags.

@SempervivumAug 13.2019 — #As far as I understand your code and the image the colors are matching exactly the ones you defined in the array `colors`. So I don't understand what the issue is.

@Sina123authorAug 14.2019 — #But it takes only from the default color array defined. It does not take into consideration the color mentioned in the series.data.color.

@SempervivumAug 14.2019 — #I understand but I cannot reproduce this in my testfile. In this code the colors in the field series override the colors in the array:

 Highcharts.chart('container', {
 colors: [
 "#32456C",
 "#009A8F",
 "#FABE00",
 'grey',
 'magenta'
 ],
 chart: {
 plotBackgroundColor: null,
 plotBorderWidth: null,
 plotShadow: false,
 type: 'pie'
 },
 title: {
 text: 'Browser market shares in January, 2018'
 },
 tooltip: {
 pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'
 },
 plotOptions: {
 pie: {
 allowPointSelect: true,
 cursor: 'pointer',
 dataLabels: {
 enabled: false
 },
 showInLegend: true
 }
 },
 series: [{
 name: 'Brands',
 colorByPoint: true,
 data: [{
 name: 'Chrome',
 color: 'blue',
 y: 61.41,
 sliced: true,
 selected: true
 }, {
 name: 'Internet Explorer',
 y: 11.84,
 color: 'green'
 }, {
 name: 'Firefox',
 y: 10.85,
 color: 'yellow'
 }, {
 name: 'Edge',
 y: 4.67,
 color: 'lightblue'
 }, {
 name: 'Safari',
 y: 4.18
 }, {
 name: 'Other',
 y: 7.05
 }]
 }]
 });

@SempervivumAug 14.2019 — #PS: You wrote "i tried [b]within[/b] plotOptions:"

In my code (which I took from an example on the website of Highcharts) `series` is not located within plotOptions but in parallel.

@Sina123authorAug 14.2019 — #Ya i see that i am just trying that too. just hoping for the best. will get back with the results.

@Sina123authorAug 14.2019 — #

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565770083-364037-image.png]

I just get an empty pie chart then on hovering over the points the colors are loaded. which are still random colors and not what i require. My code:

var colors = {
 'Medium': '#FFFF00',
 'Urgent': '#FF0000'
 };
 var chartData = {          <br/>
 chart: { renderTo: "container", backgroundColor: "transparent" },
 title: { text: key },
 xAxis: {},
 plotOptions: {
 line: { dataLabels: { enabled: false }, enableMouseTracking: true },
 series: { animation: false }, 
 credits: { enabled: false },
 exporting: { enabled: false }
 };
 case "pie":
 var hiddenfilter = JSON.parse(widget.getValue("hiddenfilter"));
 var colnumber = widget.getValue("columnnumber");
 
 <i>    </i>        var set = { name: key, data: [] };
 
 <i>    </i>        for (var data in column.content) {
 <i>    </i>          if (column.content.hasOwnProperty(data)) {
 <i>    </i>            var setSelected =
 <i>    </i>              hiddenfilter[colnumber].indexOf(
 <i>    </i>                column.content[data].toString()
 <i>    </i>              ) != -1
 <i>    </i>                ? true
 <i>    </i>                : false;
 <i>    </i>            set.data.push({
 <i>    </i>              name: column.content[data].toString(),
 <i>    </i>              y: column.count[data],
 <i>    </i>              sliced: setSelected,
 <i>    </i>              selected: setSelected
 <i>    </i>            });
 <i>    </i>          }
 <i>    </i>        }
 
 <i>    </i>        dataset.push(set);
 
 <i>    </i>        chartData.plotOptions = {
 <i>    </i>          pie: {
 <i>    </i>            allowPointSelect: true,
 <i>    </i>            cursor: "pointer",
 <i>    </i>            point: {
 <i>    </i>              events: {
 <i>    </i>                /* searchTable */
 <i>    </i>                click: function(evt) {
 <i>    </i>                  var selected = this.name.toString();
 <i>    </i>                  if (!evt.point.options.selected) {
 <i>    </i>                    var data = {
 <i>    </i>                      type: "search",
 <i>    </i>                      column: colnumber,
 <i>    </i>                      message: selected
 <i>    </i>                    };
 <i>    </i>                    PlatformAPI.publish(topicName, data);
 
 <i>    </i>                    helper.handleFilter(data);
 <i>    </i>                  }
 <i>    </i>                },
 <i>    </i>                unselect: function() {
 <i>    </i>                  var selected = this.name.toString();
 <i>    </i>                  var data = {
 <i>    </i>                    type: "remove",
 <i>    </i>                    column: colnumber,
 <i>    </i>                    message: selected
 <i>    </i>                  };
 <i>    </i>                  PlatformAPI.publish(topicName, data);
 
 <i>    </i>                  helper.handleFilter(data);
 <i>    </i>                }
 <i>	</i> 
 <i>    </i>              }
 <i>    </i>            },
 <i>    </i>            dataLabels: {
 <i>    </i>              enabled: true,
 <i>    </i>              format: "&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %",
 <i>    </i>              style: {
 <i>    </i>                color:
 <i>    </i>                  (Highcharts.theme &amp;&amp;
 <i>    </i>                    Highcharts.theme.contrastTextColor) ||
 <i>    </i>                  "black"
 <i>    </i>              }
 <i>    </i>            },
 <i>	</i>			distance:-20
 <i>    </i>          }
 <i>    </i>        };
 <i>    </i>        chartData.series = dataset;
 <i>    </i>        chartData.xAxis.categories = [key];
 <i>    </i>        chartData.chart.type = "pie";
 
 <i>    </i>        break;

Do you get any clue for this behaviour. Please advice.

@Sina123authorAug 14.2019 — #@Sempervivum#1607552

@SempervivumAug 14.2019 — #In the code you posted I cannot find where you add the color to `series.data`?

@Sina123authorAug 14.2019 — #oh sorry .

set.data.push({

name: column.content[data].toString(),

y: column.count[data],

sliced: setSelected,

selected: setSelected,

color: column.content[data]

});

@SempervivumAug 14.2019 — #Unfortunately I'm not able to create a test file from your code as it widely depends on resources that are not availabe for me.

Please post the resulting `series` either by writing it to the console or by creating a JSON string.

@Sina123authorAug 14.2019 — #@Sempervivum#1607564

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565774261-199700-image.png]

Sorry I am not able to copy from console.Is there a way for that.

@SempervivumAug 14.2019 — #That's sufficient, color is undefined, you have to fix this.

You posted this code:

set.data.push({
 name: column.content[data].toString(),
 y: column.count[data],
 sliced: setSelected,
 selected: setSelected,
 color: column.content[data]
 });

I guess that `column.content[data]` is the name of the record and that the color should be determined from you object colors like this:

set.data.push({
 name: column.content[data].toString(),
 y: column.count[data],
 sliced: setSelected,
 selected: setSelected,
 color: colors[column.content[data]]
 });

@Sina123authorAug 14.2019 — #That was a mistake from my side as i have two files. The one in the console appears minified hence not understandable so i had pasted from my local file. Sorry for the trouble. This is from the source as it appears in the Inspector.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565774866-278678-image.png]

@Sina123authorAug 14.2019 — #@Sempervivum#1607570 Now i get this:

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565775113-697880-image.png]

which has taken my colors, but unfortunately the other ones are blank and colored only upon hovering. What could be missing

@SempervivumAug 14.2019 — #Did you complete your object `colors`? The one you posted above has two entries only:

var colors = {
 'Medium': '#FFFF00',
 'Urgent': '#FF0000'
 };

@Sina123authorAug 14.2019 — #@Sempervivum#1607575 I need to define colors only for these two cases. The other labels can take color from the default.

@SempervivumAug 14.2019 — #In the code you posted above I cannot find any default colors:

var chartData = { 
 
 <i>    </i>      chart: { renderTo: "container", backgroundColor: "transparent" },
 <i>    </i>      title: { text: key },
 <i>    </i>      xAxis: {},
 <i>    </i>      plotOptions: {
 <i>    </i>        line: { dataLabels: { enabled: false }, enableMouseTracking: true },
 <i>    </i>        series: { animation: false }, 
 <i>    </i>      credits: { enabled: false },
 <i>    </i>      exporting: { enabled: false }
 <i>    </i>    };

@Sina123authorAug 14.2019 — #@Sempervivum#1607580 How can i define explicitly as it gets filled upon hovering:

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565775623-667312-image.png]

@SempervivumAug 14.2019 — #In my test file it works fine: I deleted the default colors at the beginning of the chart data and the remaining sections are filled by the colors that Highcharts defines. Going to look into further ...

@Sina123authorAug 14.2019 — #@Sempervivum#1607582 So how does the highchart get the colors which are not defined. Can i possibly have another array for the colors for other values not defined in the series.

@SempervivumAug 14.2019 — #I desperately tried to reproduce the behaviour you described: Colors only visible on hover but no success. All slices are displaying fine.

You wrote that you have two files. Is the screenshot of the console from the file that is online?

Can i possibly have another array for the colors for other values not defined in the series.[/quote]
Yes, you can define default colors as I did this way in my test file:

 Highcharts.chart({
 colors: [
 "#32456C",
 "#009A8F",
 "#FABE00",
 'grey',
 'magenta'
 ],

@Sina123authorAug 14.2019 — #@Sempervivum#1607586 So if i define array of colors like way in your example how can i acheive as i have only an array for the names is it possible to consider both as arrays. I dont know if i could make myself clear of what i intend.

@SempervivumAug 14.2019 — #Not shure if I understand correctly. You might define two different arrays:

var colors = {
 'Medium': '#FFFF00',
 'Urgent': '#FF0000'
 };
 var defaultColors = [
 "#32456C",
 "#009A8F",
 "#FABE00",
 'grey',
 'magenta'
 ];
 
 var chartData = {          <br/>
 colors: defaultColors,
 chart: { renderTo: "container", backgroundColor: "transparent" },
 title: { text: key },
 xAxis: {},
 plotOptions: {
 line: { dataLabels: { enabled: false }, enableMouseTracking: true },
 series: { animation: false }, 
 credits: { enabled: false },
 exporting: { enabled: false }
 };

@Sina123authorAug 14.2019 — #@Sempervivum#1607589 it shows the result :(

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565783426-701677-image.png]

@SempervivumAug 14.2019 — #Please post `series` again. It should have changed as "Urgent" and "Medium" are visible now.

@SempervivumAug 14.2019 — #PS: Which version of Highcharts are you using?

@Sina123authorAug 14.2019 — #

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565785937-122199-image.png]

The other values are undefined still

@SempervivumAug 14.2019 — #What about the version?

@Sina123authorAug 14.2019 — #@Sempervivum#1607595 Sorry i have no idea :(

@Sina123authorAug 14.2019 — #Finally it looks solved..

in the

A.data.push

({name:r.content[K].toString(),

y:r.count[K],sliced:F,selected:F,

color: colors[r.content[K]] == undefined ? defaultColors[K]: colors[r.content[K]] })

just added condition if undefined to get color from the defaultcolors.!

@Sina123authorAug 14.2019 — #Thank you for support..it was really helpful.

Sorry i had one more query..if its ok can i continue in the same post. Its that i have a bar chart too but it does not show the datalabes on the left- i.e the categories. The code is:

case "barcol":
 var colnumber = widget.getValue("columnnumber");
 var countedcoldata =helper.countKeys(column.content).content;
 for (var data in column.content) {
 if (column.content.hasOwnProperty(data)) {
 var setSelected =
 hiddenfilter[colnumber].indexOf(
 column.content[data].toString()
 ) != -1
 ? true
 : false;
 dataset.push({
 name: column.content[data].toString(),
 data: [column.count[data]],
 selected: setSelected,
 color:colors[column.content[data]]
 });
 }
 }
 chartData.plotOptions = {
 allowPointSelect: true,
 cursor: "pointer",
 point: {
 /* searchTable */
 events: {
 click: function(evt) {
 var selected = evt.point.series.name.toString();
 
 <i>    </i>            if (!evt.point.options.selected) {
 <i>    </i>              var data = {
 <i>    </i>                type: "search",
 <i>    </i>                column: colnumber,
 <i>    </i>                message: selected
 <i>    </i>              };
 <i>    </i>            }
 <i>    </i>          },
 <i>    </i>                       }
 <i>    </i>        }
 <i>    </i>      }
 <i>    </i>    };
 <i>    </i>    chartData.series = dataset;
 <i>    </i>    chartData.xAxis.categories = countedcoldata ;
 <i>    </i>    chartData.chart.type = "bar";
 <i>    </i>    break;

This code just shows one of the values out of the four values.

@Sina123authorAug 14.2019 — #

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565788471-510313-barchart.jpeg]

@Sempervivum

@SempervivumAug 14.2019 — #Please check your variable `countedcoldata`.

Regarding the version number: You find it in Highchart's javascript file, on top.

@Sina123authorAug 14.2019 — #@Sempervivum#1607612

you mean the values in the variable?

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-08-14/1565795598-734188-image.png]

Regarding the version number: Theres only a reference in my js file, but no Highchart's javascript file

DS/3DXHighcharts/3DXHighcharts

@SempervivumAug 14.2019 — #That looks fine. The same situation as previously: I cannot reproduce this error, on my test site everything is OK.

Regarding the version number: You don't include a javascript file like this?
<script src="https://code.highcharts.com/highcharts.js"></script>

@Sina123authorAug 14.2019 — #@Sempervivum#1607615 No :(

@SempervivumAug 14.2019 — #You posted the reference DS/3DXHighcharts/3DXHighcharts. Please post the context where this is visible.

I assume you have a pro license?

@Sina123authorAug 19.2019 — #@Sempervivum#1607619 I use highcharts-all.js

Thanks for your support. this issue was solved.

Also in #JavaScript _↴

"Queen X"Help with Javascript drop down menu in header.php Javascript Environment Issue

Success!

Help @Sina123 spread the word by sharing this article on Twitter...

Tweet This

Javascript highchart display User defined colors on pie

40 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript highchart display User defined colors on pie

40 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

40 Comments(s) _↴

Also in #JavaScript _↴