Change bar colors in javascript chart

Asked

Viewed 613 times

0

I was answered in a previous question regarding changing colors of my chart, but I want to know how I can change the colors of each bar individually to the colors I want?

Follow the modified code in response by the user Martian Axe:

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 6,
      beta: 16,
      depth: 100,
      viewDistance: 200
    }
  },
  xAxis: {
    type: 'category'
  },
  title: {
    text: 'Clientes'
  },
  subtitle: {
    text: 'Gráfico demonstrativo'
  },
  plotOptions: {
    column: {
      depth: 25
    }
  },
  series: [{
    "colorByPoint": true,
    data: [{
      "name": "Coluna 1",
      "y": 500.94,
      "drilldown": "Coluna "
    }, {
      "name": "Coluna 2",
      "y": 106.4,
      "drilldown": "Coluna 2"
    }, {
      "name": "Coluna 3",
      "y": 1000.5,
      "drilldown": "Coluna 3"
    }, {
      "name": "Coluna 4",
      "y": 144.0,
      "drilldown": "Coluna 4"
    }]
  }]
});

function showValues() {
  $('#alpha-value').html(chart.options.chart.options3d.alpha);
  $('#beta-value').html(chart.options.chart.options3d.beta);
  $('#depth-value').html(chart.options.chart.options3d.depth);
}


$('#sliders input').on('input change', function() {
  chart.options.chart.options3d[this.id] = parseFloat(this.value);
  showValues();
  chart.redraw(false);
});

showValues();
#container,
#sliders {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

#container {
  height: 400px;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>
<div id="sliders">
</div>

javascript html5

2 answers

1

The user response rnd_rss helped me a lot. Follow the code as I wanted:

series: [{
"colorByPoint": true,
data: [{
"name": "Ativos",
color: '#90ed7d',
"y": 500,
"drilldown": "Ativos"
}, {
"name": "Suspensos",
color: '#f7a35c',
"y": 106,
"drilldown": "Suspensos"
}, {
"name": "Cancelados",
color: '#e0042e',
"y": 1000,
"drilldown": "Cancelados"
}]

0


You should set the color when you set the data set:

series: [{
    "colorByPoint": true,
    data: [{
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 1",
      "y": 500.94,
      "drilldown": "Coluna "
    }, {
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 2",
      "y": 106.4,
      "drilldown": "Coluna 2"
    }, {
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 3",
      "y": 1000.5,
      "drilldown": "Coluna 3"
    }, {
      color: '#0066FF', // aqui vai a cor que você quer, o hexadecimal no caso
      "name": "Coluna 4",
      "y": 144.0,
      "drilldown": "Coluna 4"
    }]

I advise to consult the documentation it is very easy to understand and has several examples.

ref: https://www.highcharts.com/docs/chart-concepts/series#4

  • 1

    Thank you very much friend. It worked very well, however, just to explain, the code to modify the color should stay within the "date":

  • True Carlos, outside where I put it changes all colors, ie it is all in the same color, to individually change each series of data have to put the color within the date. I adjusted my answer to agree

  • Could you help me with one more thing? I wanted to pass the value of a php variable in this script. Ex.: <?php $test="900"; ? > in the column value.

  • Open another question, I haven’t touched php in a while and it’s easier for someone to help you

  • Blza. I’ll do it. Thanks.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.