Time Serie issue - charts

I am working with Nextjs 13, chart.js v4.0.1 and react-chartjs-2 v5.0.1.
I could succesfully plot graph with a classic scale, but now that I am trying with x axis in serie, I have a weird error "Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused."
Do you have any idea why this occur ? This is my sample code :
"use client";
import React from "react";
import { Chart as ChartJS, TimeScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
import { Line } from "react-chartjs-2";
ChartJS.register(TimeScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
export const options = {
plugins: {
legend: {
position: "bottom" as const,
},
title: {
display: false,
// text: "Chart.js Line Chart",
},
},
response: true,
scales: {
x: {
type: "time",
time: {
unit: "day",
},
},
},
maintainAspectRatio: false,
};
export const data = {
datasets: [
{
label: "Estimation",
data: [
{
x: new Date("2020-01-01"),
y: 50,
},
{
x: new Date("2020-01-02"),
y: 60,
},
],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
tension: 0.25,
},
],
};
export default function Kikoo() {
return (
<div className="relative px-4 py-8" style={{ margin: "auto", width: "100%", height: "100%" }}>
<Line options={options} data={data} />
</div>
);
}
Thank you so much in advance, I am seriously stuck on that one :/

Related

Chartjs - Doughnut chart with multi layer and running value

I have doughnut chart using chartsjs, and also I used multi layer with cutoutPercentage.
The First Layer (Black color) is the Total and the second layer (Red Color) complete is the running value.
type: 'doughnut',
data: {
datasets: [
{
data: Total,
fill: true,
backgroundColor:'rbg(242, 133, 0)',
borderWidth: 3,
weight:1,
},{
data: complete,
fill: true,
backgroundColor:'rgb(255,36,0)',
borderWidth: 3,
weight:1,
}
]
},
options: {
responsive: true,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 70,
},
This is what I need,2nd layer is running until reach the total.
In case you need a generic solution, you can use the Plugin Core API and define a beforeInit hook that modifies the chart configuration to fit your needs.
Please take a look at below runnable code and see how it could be done.
new Chart('runningValue', {
type: 'doughnut',
plugins: [{
beforeInit: chart => {
chart.data.datasets = [{
data: [chart.data.total],
backgroundColor: chart.data.totalColor,
borderWidth: 3
},
{
data: [chart.data.complete, chart.data.total - chart.data.complete],
backgroundColor: [chart.data.completeColor, '#fff'],
borderWidth: 3
}
]
}
}],
data: {
total: 50,
complete: 35,
totalColor: 'rbg(242, 133, 0)',
completeColor: 'rgb(255,36,0)'
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
Simply define two values and two background colors on the second dataset as shown in the runnable code below.
const total = 50;
const complete = 35;
new Chart('runningValue', {
type: 'doughnut',
data: {
datasets: [{
data: [total],
backgroundColor: 'rbg(242, 133, 0)',
borderWidth: 3
},
{
data: [complete, total - complete],
backgroundColor: ['rgb(255,36,0)', '#fff'],
borderWidth: 3
}
]
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>

Using ChartJS to create a multiple grouped bar chart - see picture below

I am testing out HighCharts and ChartJS to see which to use. For Highcharts, I was able to find a hack to create a bar chart that had double grouping on the x-axis.
This is what I want to look like:
I am new to both charting JS options and wonder if there is a way to do this in ChartJS.
I have the datasets something like this:
xAxis: {
categories: [{
name: "Total",
categories: ["2004", "2008", "2012"]
}, {
name: "Lower than 2.50",
categories: ["2004", "2008", "2012"]
}]
},
yAxis: {
min: 0,
title: {
text: 'Percent (%)'
}
},
series: [{
name: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4]
}, {
name: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6]
}]
Essentially I need a nest series on the x-axis and I am open to plugins or code from Github to do this.
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code, I use the afterDraw hook to draw the category labels and the delimiter lines.
new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
let xCenter = (xAxis.left + xAxis.right) / 2;
let yBottom = chart.scales['y-axis-0'].bottom;
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillText(chart.data.categories[0], (xAxis.left + xCenter) / 2, yBottom + 40);
ctx.fillText(chart.data.categories[1], (xCenter + xAxis.right) / 2, yBottom + 40);
ctx.strokeStyle = 'lightgray';
[xAxis.left, xCenter, xAxis.right].forEach(x => {
ctx.beginPath();
ctx.moveTo(x, yBottom);
ctx.lineTo(x, yBottom + 40);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
labels: ['2004', '2008', '2012', '2016', '2004', '2008', '2012', '2016'],
categories: ['Total', 'Lower than 2.50'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4, 51.2, 51.8],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6, 53.7, 54.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
padding: 30,
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
You have to define a second x-axis and play around with the many ticks and gridLines options.
Please take a look at below runnable code and see how it could be done. This is obviously only a draft and needs to optimized and made more generic.
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2004', '2008', '2012', '2004', '2008', '2012'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
},
{
offset: true,
ticks: {
autoSkip: false,
maxRotation: 0,
padding: -15,
callback: (v, i) => {
if (i == 1) {
return 'Total';
} else if (i == 4) {
return 'Lower than 2.50';
} else {
return '';
}
}
},
gridLines: {
drawOnChartArea: false,
offsetGridLines: true,
tickMarkLength: 20,
color: ['white', 'white', 'white', 'lightgray', 'white', 'white', 'lightgray']
}
}
]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Chart.js ignore options

I'm trying to create a line chart with chart.js but when I try to style my chart.
Everything from options is ignored.
Here is my code:
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
],
options: ChartOptions
}
});
</script>
I tried to copy the code from https://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html but it's the same. I can't add options to my chart.
Even the title is not showing. This is not a cache problem because I run it with chrome devtools open and tried with a different browser.
the options are in the wrong place,
they should be placed after the data object
data: {
},
options: ChartOptions
you had them as part of the data object...
data: {
options: ChartOptions
},
see following working snippet...
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
]
},
options: ChartOptions
});
</script>

Highchart multi Yaxis in one line

I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.
The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/

ChartJS - ignore labels

I am using ChartJS and need a chart like this: https://tppr.me/OE08p
Meaning it should ignore 4 of the labels (flexibility, external, stability, internal) and connect the dots from the other 4 labels (like the red lines show on the screenshot).
Can I ignore these 4 labels data-wise somehow, but keep them?
Other chart packages/solutions are welcome, if it is not possible in chartjs.
You can use highchart.js library, see:
docs: https://www.highcharts.com/docs/chart-and-series-types/polar-chart
example: https://www.highcharts.com/demo/polar-spider
with these options:
plotOptions: {
series: {
connectNulls: true
}
}
and filtering data with map function like below (just for example):
data.map(filter)
<omissis>
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
here is a jsfiddle showing this approach: http://jsfiddle.net/beaver71/w6ozog1c/
or a snippet here:
// original data
var data1 = [43000, 19000, 60000, 35000, 17000, 10000],
data2 = [50000, 39000, 42000, 31000, 26000, 14000];
var chart = Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: data1.map(filter), // filtered data
pointPlacement: 'on',
color: 'red'
}, {
name: 'Actual Spending',
data: data2,
pointPlacement: 'on',
color: 'green'
}],
plotOptions: {
series: {
lineWidth: 2,
connectNulls: true // connects also null value (bypassing)
}
}
});
var filterOn = true;
$('#button').click(function () {
filterOn = !filterOn;
if (filterOn)
chart.series[0].setData(data1.map(filter));
else
chart.series[0].setData(data1);
});
// filter function with your criteria
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
.highcharts-grid-line {
stroke-width: 2;
}
<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-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="button">Toggle filter (ignoring a point in red serie)</button>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>