CODEWITHSUNDEEP
javascriptjquerychartshighcharts
kungfu_king_betty
kungfu_king_betty

Reputation: 35

Series Not Working in HighCharts

So I am creating a highcharts bar chart in a function inside my jQuery script, and it was working fine until I tried to incorporate different colors for each bar of the bar chart. My code is basically as follows

function BarChart(title, gType, list, numbers){
    var data = [];
    var allData = [];
    var series = [];
    var len = numbers.length;
    var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
    for(i=0; i<len; i++){
        data.push({
            y: numbers[i],
            color:colors[i]
        });
        allData.push(data[i]);
    }
    for(i=0; i<len; i++){
        series.push({
            name: list[i],
            data: allData[i]
        });
    }

Then I go on and create the chart and for series, I simply put

series: series

But no bars come up, only the legend, the title, the yAxis title and the xAxis title. If you can help me out that be great, hopefully my question is clear enough! Thanks!

P.S.

when I just put 

series:[{
data: data
}]

it works, but then all the legend says is Series 1 and I don't want that, I want it to actually show the name of each data with its corresponding color, thanks again!

Upvotes: 0

Views: 964

Answers (2)

Brandon
Brandon

Reputation: 294

In case you were still looking into the "Series 1" problem in the legend. I found an interesting way to have each point be it's own series and still group correctly on the x-axis. It works by abusing bar stacking:

plotOptions: {
  series: {
    stacking: 'normal'
  }
},

and setting an increment x value on each data point:

data.forEach(function(val, i) {
    seriesData.push({
      name: categories[i],
      color: colors[(i % colors.length)],
      data: [{
        x: i,
        y: val
      }]
    });
  });

Here is a working fiddle built from an example I derived from the highcharts docs:

http://jsfiddle.net/89efeqhs/

Upvotes: 0

kungfu_king_betty
kungfu_king_betty

Reputation: 35

I solved my own problem, but just for reference to anyone else who runs into this problem, its rater simple. Write this code,

plotOptions:{
series:{
    colorByPoint: true
}}

And highcharts will color each bar/column/line individually.

For reference here is the highcharts page that showed me this:http://api.highcharts.com/highcharts#plotOptions.bar

Upvotes: 0

Related Questions