I have a web app written with ASP .NET Core, on one of the pages there is a bar chart created using chartJS (it gets data from database). I'm trying to display data values over each bar in the chart. I tried using this plugin, but then my chart doesn't show on the page and I'm getting the following errors: Uncaught ReferenceError: ChartDataLabels is not defined and Uncaught TypeError: Cannot set property 'datalabels' of undefined:
Here is my code for the chart:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.3.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '#Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Fact',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
What am I missing?
UPDATE:
I've updated my code thanks to #LeeLenalee's advice, but now I'm getting another error message: Uncaught TypeError: Cannot read property 'skip' of undefined
Updated code:
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '#Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Hour',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
UPDATE 2:
As it turns out, there is an updated version of chartjs-plugin-datalabels that is working with ChartJS 3.0, so the solution was to implement latest versions of both as shown below:
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.5.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
</body>
As stated in the documentation you will need to have at least Chart.js version 2.7.0 installed, you are currently using 2.3.0.
After that you either have to register the plugin globally by calling Chart.plugins.register(ChartDataLabels); so all the charts have the datalabels or register it locally to the chart you want the labels for as shown in the example below:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
},
plugins: [ChartDataLabels]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
</body>
Related
Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming.
Is there a way to remove this space without just putting negative margins on the element?
I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.
I made a quick CodeSandbox to show my actual component
Any tips would be greatly appreciated!
Cheers!
Horizontal Stacked Bar Chart
<template>
<div style="width: 100%; height: 100%">
<canvas :id="id" width="100%" height="100%"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"
export default defineComponent({
props: {
kind: {
/**
* #example: 'single', 'stacked'
*/
type: String,
default: "stacked",
},
color: {
type: String,
default: "rgba(255, 99, 132, 1)",
},
labels: {
type: Array,
default: () => ["S1", "S2", "S4", "S6"],
},
datasets: {
type: Array,
default: () => [
{
label: "va_value",
data: [80, 10, 60, 50],
backgroundColor: "#11DCB5",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
// This is here to show SOMETHING even if the value is 0
},
{
label: "nva_value",
data: [20, 0, 40, 0],
backgroundColor: "#CA2F4B",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
},
],
},
},
setup(props, context) {
const id = Math.random().toString()
onMounted(() => {
Chart.register(ChartDataLabels)
const ctx = document.getElementById(id)
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: props.labels,
datasets: props.datasets,
},
options: {
layout: {
padding: {
left: -20,
bottom: -20,
top: -20
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: function (value) {
return props.kind === "stacked" ? `${value}s` : `${value}%`
},
color: "#fff",
anchor: "center",
align: "center",font: {
weight: "bold",
},
},
},
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
y: {
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
},
x: {
display: props.kind === "stacked" ? true : false,
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
title: {
display: true,
text: props.kind === "stacked" ? "Step Time (s)" : "",
color: "#fff",
},
},
},
},
})
myChart
})
return { id }
},
})
</script>
<style lang=""></style>
This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:
https://codesandbox.io/s/modest-wave-60xui0
I'm new with vue and apex charts, basically what I need is to call a method from the apex chart options, I created a file showing the problem I'm having:
https://jsfiddle.net/wr3uo5va/
I need to call the method currencyValue from chartOptions.dataLabels
dataLabels: {
enabled: true,
offsetX: -25,
formatter: function(val) {
return val + " Reais"; <--- This works
// return this.currencyValue(val) <--- This does not work
},
},
Any suggestion ?
The problem is this inside the formatter callback is the chart instance (not the component instance) because it's declared as a regular function.
The solution is to use an arrow function to bind the component instance as the context:
export default {
methods: {
currencyValue(value) {⋯},
loadChartData() {
⋮
this.chartOptions = {
⋮
dataLabels: {
⋮
// ❌ don't use regular function here
//formatter: function(val) {
// return this.currencyValue(val)
//},
// ✅
formatter: (val) => {
return this.currencyValue(val)
},
},
}
}
}
}
updated fiddle
You can put chartOptions in methods instead of in data.
Below is working code
const currencyValue = (val) => {
return "R$" + val;
}
new Vue({
el: "#app",
data() {
return {
series: [450, 300, 500]
}
},
methods: {
chartOptions() {
return {
labels: ['Paid', 'Pending', 'Rejected'],
plotOptions: {
radialBar: {
size: 165,
offsetY: 30,
hollow: {
size: '20%'
},
track: {
background: "#ebebeb",
strokeWidth: '100%',
margin: 15,
},
dataLabels: {
show: true,
name: {
fontSize: '18px',
},
value: {
fontSize: '16px',
color: "#636a71",
offsetY: 11
},
total: {
show: true,
label: 'Total',
formatter: function() {
return 42459
}
}
}
},
},
responsive: [{
breakpoint: 576,
options: {
plotOptions: {
radialBar: {
size: 150,
hollow: {
size: '20%'
},
track: {
background: "#ebebeb",
strokeWidth: '100%',
margin: 15,
},
}
}
}
}],
colors: ['#7961F9', '#FF9F43', '#EA5455'],
fill: {
type: 'gradient',
gradient: {
// enabled: true,
shade: 'dark',
type: 'vertical',
shadeIntensity: 0.5,
gradientToColors: ['#9c8cfc', '#FFC085', '#f29292'],
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
},
},
stroke: {
lineCap: 'round'
},
chart: {
dropShadow: {
enabled: true,
blur: 3,
left: 1,
top: 1,
opacity: 0.1
},
},
tooltip: {
x: {
formatter: function (val) {
return val;
},
},
y: {
formatter: function (val) {
return currencyValue(val);
},
},
},
}
}
},
components: {
VueApexCharts
}
})
Methods can't be called in data or computed, they can be called in methods
One thing to be modified in html is below
<vue-apex-charts
type="donut"
:options="chartOptions()"
:series="series">
</vue-apex-charts>
I have a bar chart and I would like to change the font color, border width and some other tings, but it doesn't work. It is in my computed property. In the chartOptions I want to change the y axis min and max value but I don't know if it is correct. Can anyone help me?
Also I want to make a horizontal line in this bar chart. It is the "Enemy's Avarage" and now it is a constant. I set the type to line and now I have a dot in my chart.
This is my chart component:
<script>
import { defineComponent } from 'vue'
import { Bar } from 'vue3-chart-v2'
export default defineComponent({
name: 'ChanceChart',
extends: Bar,
props: {
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
required: false,
},
},
mounted () {
this.renderChart(this.chartData, this.chartOptions)
}
})
</script>
And this is my app:
<template>
<div id="chart">
<ChanceChart :chartData="chartData" :chartOptions="chartOptions" />
</div>
</template>
<script>
import Navigation from "../components/Navigation.vue";
import ChanceChart from "../components/ChanceChart.vue";
import PageLoader from "../components/PageLoader.vue";
export default {
components: {
ChanceChart,
},
computed: {
chartOptions() {
return {
options: {
scales: {
y: {
title: {
display: true,
text: 'Value'
},
min: 0,
max: 100,
ticks: {
stepSize: 10,
}
},
},
elements: {
point: {
radius: 0
},
line: {
borderWidth: 2
}
},
plugins: {
legend: {
labels: {
boxWidth: 0,
font: {
fontColor: "#fff",
color: "#fff"
},
},
},
},
}
}
},
chartData() {
return {
datasets: [
{
type: 'bar',
label: "Enemy's Chance",
borderColor: "#1161ed",
borderWidth: 2,
data: this.emnemyCardsFilled,
},
{
type: 'bar',
label: "My Chance",
borderColor: "#f87979",
borderWidth: 2,
data: this.myCardsFilled,
},
{
type: 'line',
label: "Enemy's Avarage",
borderColor: "rgb(238, 255, 0)",
borderWidth: 2,
data: [50],
},
],
}
},
},
You need to remove the options part in the computed chartOptions prop:
chartOptions() {
return {
scales: {
y: {
title: {
display: true,
text: 'Value'
},
min: 0,
max: 100,
ticks: {
stepSize: 10,
}
},
},
elements: {
point: {
radius: 0
},
line: {
borderWidth: 2
}
},
plugins: {
legend: {
labels: {
boxWidth: 0,
font: {
fontColor: "#fff",
color: "#fff"
},
},
},
},
}
},
the issue im facing is when i end 2nd chart like 'chart.render()' , 2nd chart gets value that i selected in first chart but when i click on another value in first chart , instead of update 2nd chart div , it creats another div vertically.
here is my chart.
i'm getting value from controlle in chart.
var app = #json($newval);
var options = {
series: app,
chart: {
events: {dataPointSelection:function (event, chartContext, config) {
var value= config.w.config.series[config.dataPointIndex]
$( "#chart2" ).load(window.location.href + " #chart2" );
secondchart(value);
}
},
width: 380,
type: 'donut',
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
//second chart starts...
function secondchart(value) {
//in this console.log im getting correct value
console.log(value)
var options = {
series: [{
data: [value]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
};
chart.render()
}
</script>```
so here is code what i want do do exactly,
<script>
var app = #json($newval);
var options = {
series: app,
chart: {
events: {
dataPointSelection: function (event, chartContext, config) {
var value = config.w.config.series[config.dataPointIndex]
secondchart(value);
}
},
width: 380,
type: 'donut',
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
function secondchart(value) {
var cat = #json($cat);
var options = {
series: [{
data: [value,value]
}],
chart: {
redrawOnParentResize: true,
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: [cat
],
}
};
// $( "#chart2" ).load(window.location.href + " #chart2" );
var chart = new ApexCharts(document.querySelector("#chart2"), options);
debugger
if ($("#chart2") == null) {
console.log( $("#chart2"));
chart.render()
} else {
$("#chart2").empty();
console.log( $("#chart2"));
chart.render()
}
}
</script>
I have the following Chart Component:
<template>
<div class="gauge-chart">
<chart :options="options"></chart>
</div>
</template>
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data: () => ({
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
}),
};
</script>
As you can see I am tryng to inject chartValue and chartName props into options.series.data.value and options.series.data.name respectively.
The values for the properties are coming from
<GaugeChart chartName="Sleep" :chartValue="2" />
At the moment the values are hardcoded, but eventually they will be dynamic.
However it keep throwing the following error:
"TypeError: Cannot read property 'chartName' of undefined"
"TypeError: Cannot read property 'chartValue' of undefined"
I have done a colsole.log of both properties and they come up as "Sleep" and 2. I have also done a typeof on both property names and they both come up as String and Number, respectively.
Could somebody tell me where I am going wrong please?
Many thanks in advance.
You cannot use 'this' operator inside an arrow function so define your data section as a normal function
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data() {
return {
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
};
}
};
</script>
You should use the prop in following manner:
<GaugeChart chart-name="Sleep" chart-value="2" />
Documentation
HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase.