Skip to main content
se añadieron 115 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Para Utilizar eseel plugin Datalabels, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: { //esta es la configuración de pluggin datalabels
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

Para Utilizar ese plugin, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

Para Utilizar el plugin Datalabels, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: { //esta es la configuración de pluggin datalabels
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

se añadieron 4 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Para Utilizar ese plugin, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.09.01/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

Para Utilizar ese plugin, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

Para Utilizar ese plugin, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>

Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Para Utilizar ese plugin, debes:

  1. agregarlo la librería despúes de la de chart.js
  2. Registrarla con Chart.register(ChartDataLabels);

Demo:

Chart.register(ChartDataLabels);
var ctx = document.getElementById("articulos").getContext('2d');
var ventas = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["RETEN DE EMBOLO", "RETEN DE EMPOLO"],
    datasets: [{
      label: 'Artículos más vendidos',
      data: [4,8],
      backgroundColor: [
        'rgba(0,166,149,255)'
      ],
      borderColor: [
        'rgba(0,166,149,255)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px;height:400px">
   <canvas id="articulos"></canvas>
</div>