I decided to add radar chart to the site, however I ran into a problem. The text around the radar is very small, and despite the addition of an option to increase it, the text remains the same
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["HTML 5", "CSS 3", "FLUTTER", "PYTHON", "JS", "DART", "React", "ThreeJS"],
datasets: [{
label: "MY SKILLS",
backgroundColor: "rgba(30,30,32,0.4)",
data: [90, 80, 60, 75, 60, 35, 55, 37]
},
],
options: {
plugins: {
legend: {
labels: {
font: {
size: 400
}
}
}
}
}
};
Option font: size doesn't work despite the fact that it is in the code
Here is an example with Chart JS V3:
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
datasets: [{
label: "Student A",
backgroundColor: "rgba(200,0,0,0.2)",
data: [65, 75, 70, 80, 60, 80]
}, {
label: "Student B",
backgroundColor: "rgba(0,0,200,0.2)",
data: [54, 65, 60, 70, 70, 75]
}]
};
var radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData,
options: {
scales: {
r: {
pointLabels: {
font: {
size: 100
}
}
}
}
}
});
<canvas id="marksChart" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Related
Y have this issue:
User 1 repeats twice in two colors, gray and white.
Gray should not be seen
This problem starts when I put styles to the x axis, it repeats the labels.
is there any solution for this case?
The requirement is simply to change the color of the axis labels and ticks.
The gray bar is at the bottom, that is, it does not stack with the red and blue ones
var data = {
labels: ["User1", "User2"],
datasets: [
{
stack:1,
label: "TotalTime",
backgroundColor: "red",
borderWidth: 1,
data: [50, 50],
yAxisID:1
},
{
stack:1,
label: "TotalTime",
backgroundColor: "blue",
borderWidth: 1,
data: [40, 40],
yAxisID:1
},
{
label: "Leave",
backgroundColor: "rgba(191,191,191, 0.5)",
borderWidth: 1,
data: [100, 100],
yAxisID:1
},
],
};
var options = {
indexAxis: "y",
scales: {
y: {
ticks: {
color: "white",
font: {
size: 12,
},
},
stacked: true,
},
x: {
ticks: {
color: "white",
font: {
size: 12,
},
},
}
}
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
canvas{
background-color:black
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>
It is because of your yAxisID, you dont define it but chart.js still makes a new axis for it since it isnt made by you with that id, so if you remove that or make it y which you have defined it doesnt make it again anymore
var data = {
labels: ["User1", "User2"],
datasets: [{
label: "TotalTime",
backgroundColor: "red",
borderWidth: 1,
data: [50, 50],
},
{
label: "TotalTime",
backgroundColor: "blue",
borderWidth: 1,
data: [40, 40],
},
{
label: "Leave",
backgroundColor: "rgba(191,191,191, 0.5)",
borderWidth: 1,
data: [100, 100],
},
],
};
var options = {
indexAxis: "y",
scales: {
y: {
ticks: {
color: "white",
font: {
size: 12,
},
},
stacked: true,
},
x: {
stacked: true,
ticks: {
color: "white",
font: {
size: 12,
},
},
}
}
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
canvas {
background-color: black
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="500" height="300"></canvas>
I can't figure out for the life of me why when I add a funnel chart to my chartjs charts all of the charts become compressed distorted upon loading. Whenever I resize the page the charts snap back to how I would expect them to load. Thanks for the help.
https://jsfiddle.net/nmp0tfh1/1/
require.config({
paths: {
chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min",
datalabels: "//cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.3.0/dist/chartjs-plugin-datalabels.min",
gauge: "//unpkg.com/chartjs-gauge#0.2.0/dist/chartjs-gauge.min",
funnel: "//cdn.jsdelivr.net/npm/chartjs-funnel#1.0.5/dist/chart.funnel.min"
},
map: {
datalabels: {
"chart.js": "chart"
},
gauge: {
"chart.js": "chart"
},
funnel: {
"chart.js": "chart"
},
}
});
require(["chart", "datalabels", "gauge", "funnel"], function(chart) {
var ctx = document.getElementById("chart").getContext('2d');
var chrt = new chart.Chart(ctx, {
type: 'gauge',
data: {
labels: ['Red', 'Yellow', 'Green'],
datasets: [{
data: [25, 50, 75],
value: 55,
backgroundColor: ['red', 'yellow', 'green'],
borderWidth: 2
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Gauge chart with datalabels plugin displaying labels'
},
layout: {
padding: {
bottom: 30
}
},
needle: {
// Needle circle radius as the percentage of the chart area width
radiusPercentage: 2,
// Needle width as the percentage of the chart area width
widthPercentage: 3.2,
// Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
lengthPercentage: 80,
// The color of the needle
color: 'rgba(0, 0, 0, 1)'
},
valueLabel: {
display: false
},
plugins: {
datalabels: {
display: true,
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
//color: function (context) {
// return context.dataset.backgroundColor;
//},
color: 'rgba(0, 0, 0, 1.0)',
//color: 'rgba(255, 255, 255, 1.0)',
backgroundColor: null,
font: {
size: 20,
weight: 'bold'
}
}
}
}
});
var ctx = document.getElementById("chart1").getContext('2d');
var chrt = new chart.Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 60, 90],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}],
labels: [
"Red",
"Blue",
"Yellow"
],
},
options: {
responsive: true,
title: {
display: true,
text: "chart title"
},
},
});
var ctx = document.getElementById("chart2").getContext('2d');
var chrt = new chart.Chart(ctx, {
type: 'funnel',
data: {
datasets: [{
data: [30, 60, 90],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}],
labels: [
"Red",
"Blue",
"Yellow"
],
},
options: {
responsive: true,
title: {
display: true,
text: "chart title"
},
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
<canvas id="chart1" width="400" height="400"></canvas>
<canvas id="chart2" width="400" height="400"></canvas>
before resize
after resize
The datalabels plugin fails on your funnel chart because it cant find an x axis and cant fix it since it doesnt understand the chart since its a custom chart. If you set display to false in the options for your funnel chart it will work.
options: {
responsive: true,
title: {
display: true,
text: "chart title"
},
plugins: {datalabels: {display: false}}
},
Live example: https://codepen.io/leelenaleee/pen/JjbNLpQ
I have a chart but when it gets the date it just display the amount of each label without converting to percentage need help
function getPieChart(rawData) {
console.log(rawData);
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
dataPoints: rawData
}]
});
chart.render();
}
getPieChart([
{ y: 444, label: "Abuja Hqrs" },
{ y: 176, label: "Kano" },
{ y: 266, label: "Alausa" },
{ y: 221, label: "Portharcourt" },
{ y: 3717, label: "Ikoyi" }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>
<div id="chartContainer"></div>
You can display percentages by removing yValueFormatString: "##0.00\"%\"" and replacing indexLabel: "{label} {y}" with indexLabel: "{label} #percent%".
function getPieChart(rawData) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
data: [{
type: "pie",
startAngle: 240,
indexLabel: "{label} #percent%",
dataPoints: rawData
}]
});
chart.render();
}
getPieChart([
{ y: 444, label: "Abuja Hqrs" },
{ y: 176, label: "Kano" },
{ y: 266, label: "Alausa" },
{ y: 221, label: "Portharcourt" },
{ y: 3717, label: "Ikoyi" }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>
<div id="chartContainer"></div>
See the indexLabel documentation for more details.
you could set format with changing properties yValueFormatString and indexLabel.
it is converted to percentage by yValueFormatString: "##0.00\"%\"". this document might be helpful for you.
For example, if you want to describe format as [$34], set yValueFormatString: "[$##]"
and the details for indexLabel at here
See following snippet:
function getPieChart(rawData) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##", // does not need
indexLabel: "{label} is {y}",
dataPoints: rawData
}]
});
chart.render();
}
getPieChart([
{ y: 444, label: "Abuja Hqrs" },
{ y: 176, label: "Kano" },
{ y: 266, label: "Alausa" },
{ y: 221, label: "Portharcourt" },
{ y: 3717, label: "Ikoyi" }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>
<div id="chartContainer"></div>
How to use the visualMap to color lines based on their value on the X-axis. I want to color red for all values greater than 23 and green for all values greater than 23.
My script looks like the following:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main_chart'));
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
visualmap: {
show: false,
dimension: 0,
min: 0,
max: 10,
range: [0, 23],
inRange: {
color: 'red'
},
outOfRange: {
color: 'green'
}
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html
Unfortunately this doesn't work like this.
In general, there is a good description somewhere how this works with the visualMap, in the official documentary of echarts I don't get it.
I assume you want to color red for all values less than 23 and green for all values greater than 23.
you can use visualMap like this
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}],
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>
I need to make this coding in a way where I can show JSON data in graph. but I don't know how to convert this coding in a way so that this graph will show JSON data. I am posting coding in here for your convenience.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "dark2",
title:{
text: "MOVEMENT CATEGORY"
},
subtitles:[
{
text: "(STANDSTILL, ON FOOT or ON VEHICLE)",
},],
axisX:{
title: "TIME SLOT"
},
axisY:{
title:"Number of users(%)",
suffix: "%"
},
toolTip:
{
shared: true
},
data: [{
type: "stackedArea100",
name: "STANDSTILL",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 83, label: "6am - 10am" },
{ y: 51, label: "10am - 4pm" },
{ y: 64, label: "4pm - 8pm" },
{ y: 71, label: "8pm - 12am" },
{ y: 45, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON FOOT",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 20 , label: "6am - 10am" },
{ y: 30, label: "10am - 4pm" },
{ y: 24, label: "4pm - 8pm" },
{ y: 38, label: "8pm - 12am" },
{ y: 51, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON VEHICLE",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 11, label: "6am - 10am" },
{ y: 61, label: "10am - 4pm" },
{ y: 50, label: "4pm - 8pm" },
{ y: 23, label: "8pm - 12am" },
{ y: 31, label: "12am - 6am" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>