I'm trying to show the received values in different color according to the clock. But can't figure out how to assaing a color for each hours in categories. Is it possible to have an output like this?
My current options:
options: {
chart: {
height: 350,
type: 'heatmap',
},
plotOptions: {
heatmap: {
shadeIntensity: 0.5,
radius: 0,
useFillColorAsStroke: false,
colorScale: {
ranges: [{
name: 'Working Hours',
color: '#40eab0'
},
{
name: 'Off Hours',
color: '#53b3fc'
}
]
}
}
},
xaxis: {
type: 'category',
categories: ['00','01','02','03','04','05','06','07','08','09','10', '11', '12', '13', '14', '15', '16', '17','18','19','20','21','22','23']
},
dataLabels: {
enabled: false
},
stroke: {
width: 1
},
title: {
text: 'HeatMap Chart with Color Range'
},
}
Related
chart error
I have an issue while using chart.js.
I set initial data to show on chart. (from 0 index to 15 index of data),
the datalabel of line chart is over the X-Axis after drawing chart.
Here is my code.
<Chart
type="bar"
height={500}
options={{
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
threshold: 10,
},
zoom: {
wheel: {
enabled: true,
speed: 0.3,
},
pinch: {
enabled: true,
},
mode: 'x',
},
},
},
maintainAspectRatio: false,
responsive: true,
layout: {
padding: 10,
},
scales: {
xAxis: {
stacked: true,
min: 0,
max: 15,
},
yAxis: {
stacked: true,
beginAtZero: true,
title: {
display: true,
},
ticks: {
maxTicksLimit: 10,
},
min: 0,
afterDataLimits: scale => {
scale.max = scale.max * 1.2;
},
},
},
}}
data={{
labels: xAxisNameList, // ex : ['2023.01.25', '2023.01.26']
datasets: dataSetList, //
}}
/>
And This is my data set list.
const dataSetList: any[] = [
{
data: data,
datalabels: {
align: 'end',
anchor: 'start',
display: true,
},
},
{
label: `...`,
data: data,
parsing: {
yAxisKey: `...`,
},
datalabels: {
anchor: 'end',
align: 'start',
clamp: true,
display: true,
},
},
];
And here is my package.json
"chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0",
"chartjs-plugin-zoom": "^2.0.0",
"react-chartjs-2": "^4.3.1"
I want to datalabels inside chart graph Whenever I zoom or pan this chart.
I want to make area chart with smooth line. and I have tried curveType : "function" and intervals : { "style" : "area", "color" : "#D49464" } but both are not working in my case here is my code -
var options = {
chartArea: { top: -10, height: '90%', width: '90%' },
height: 40,
width: 100,
legend: 'none',
curveType: 'function',
intervals: { 'style': 'area', 'color': '#D49464' },
hAxis: {
textPosition: 'none',
minValue: 0,
},
vAxis: {
minValue: 0,
textPosition: 'none',
gridlines: { count: 0 },
baselineColor: '#FFF',
},
areaOpacity: 0.1,
isStacked: true
};
I'm learning to work with Apexcharts and need to show the labels (Y axis labels an data labels) as currency (GBP) but can't seem to find the right approach. I have looked at the locale code, but really not sure how to integrate this into my chart.
I'm trying to ensure that 1000 become 1,000 etc.
Below is the chart code
<script>
var options = {
series: [
{
name: "Price in £s",
data: [1000, 2000, 2500, 3000, 4800, 6000]
}
],
chart: {
height: 350,
type: 'bar',
id: 'areachart-2',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ['#f6564d', '#545454'],
dataLabels: {
enabled: false,
textAnchor: 'middle',
formatter: function(val, index) {
return val.toFixed(0);
}
},
stroke: {
curve: 'straight'
},
title: {
text: '',
align: 'left'
},
grid: {
borderColor: '#f1f1f1',
row: {
colors: ['#fff', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
markers: {
size: 100
},
xaxis: {
categories: ['01/05/22','01/06/22','01/07/22','01/08/22','01/09/22','01/10/22'],
title: {
text: 'Month'
}
},
yaxis: {
min:00,
title: {
text: 'Price in GBP',
},
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: 100,
offsetX: 100
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
In yaxis add labels formatter
labels:{
formatter: (value) => {
return `${numberWithCommas(value)} GBP`;
},
},
And use this regex to add commas
function numberWithCommas(x) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}
Axes labels formatting can be controlled by yaxis.labels.formatter and xaxis.labels.formatter.
yaxis: {
labels: {
formatter: function (value) {
return value + "$";
}
},
},
xaxis: {
labels: {
formatter: function (value) {
return value;
}
}
}
I am creating bar charts using chartjs 3.5.1, and I am new to chartjs. I want to add value labels to each bar in my bar chart.
I have reviewed some relevant answers, but they are either too old or too complicated to achieve.
Below is the intended outcome, note that the non-hand-written part is what I have achieved.
The code is below:
let chart2 = new Chart('chart2', {
type: 'bar',
data: {
labels: ["a", "b", "c", "d"],
datasets: [{
data: [500, 400, 300, 200],
}]
},
options: {
indexAxis: 'y',
plugins: {
title: {
display: true,
text: "Graph"
},
legend: {
display: false,
}
},
scales: {
y: {
grid: {
display: false
},
},
x: {
grid: {
display: false
}
}
}
},
});
Really appreciate your help!
You can use the chartjs-plugin-datalabels library.
First you'll have to register the plugin, then you can define the desired options inside options.plugins.datalabels.
Please take a look at your amended code and see how it works.
Chart.register(ChartDataLabels);
new Chart('chart2', {
type: 'bar',
data: {
labels: ["a", "b", "c", "d"],
datasets: [{
data: [500, 400, 300, 200],
}]
},
options: {
indexAxis: 'y',
layout: {
padding: {
right: 60
}
},
plugins: {
title: {
display: true,
text: "Graph"
},
legend: {
display: false,
},
datalabels: {
color: 'blue',
anchor: 'end',
align: 'right',
labels: {
title: {
font: {
weight: 'bold'
}
}
}
}
},
scales: {
y: {
grid: {
display: false
},
},
x: {
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart2" height="100"></canvas>
I wish Google Charts error messages were a little more clear. I'm getting the following error:
Chart not displayed due to error: a[jc] is not a function. Full error object follows.
In the object that follows it doesn't give much additional information.
My columns are specified like this:
chartData.data.cols = [
{
id: "some-date",
label: "Date",
type: "datetime",
},
{
id: "somenumber",
label: "Some Number",
type: "number",
},
];
And my rows are created like this:
var dateObject = new Date("2014-12-06T10:30:00-0800");
var newRow = {
c: [
{
v: dateObject,
},
{
v: arrayItem.predicted_dst,
},
],
}
My options.haxis is:
hAxis: {
title: "Default hAxis Title",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
gridlines: {
color: '#ECF0F1', //$lightGreyAccent'
count: -1,
},
direction: -1,
baseline: 1,
baselineColor: '#ECF0F1', //$lightGreyAccent
},
It took me a while to solve this problem so I thought I'd post the situation. It turns out that the baseline:1 was causing the issue.
In my code the baseline 1 was in there as a default for the many other charts I've been creating.
My options now look like this:
hAxis: {
title: "Default hAxis Title",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
gridlines: {
color: '#ECF0F1', //$lightGreyAccent'
count: -1,
},
direction: -1,
baselineColor: '#ECF0F1', //$lightGreyAccent
},
I'm not sure why the Google Chart error message is so cryptic, but if anyone else gets this error