Change the name shown in javascript graph column

Asked

Viewed 32 times

0

I would like to know how to change the name (series) displayed when hovering the mouse in the chart column. I looked into it and I couldn’t get an answer. Thank you for anyone who can help me. Follows the code:

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>

2 answers

0

You can change putting after series: [{"colorByPoint": true, "name": "O que vc quiser aqui",

0


Series also has the name property, just put it. Ex:

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: [{
    "name": "Teste",
    "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"
    }]
  }]
});
  • Thank you very much, that’s right.

Browser other questions tagged

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