Related
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
I'm using Chart.js with a React wrapper (react-chartjs-2). I want to upgrade to the latest major version of Chart.js (3.x) to remove the dependency on moment, among other benefits. There are lots of breaking changes in 3.x, and I've gotten nearly everything working again with all the breaking changes, except for this one infuriatingly small thing.
There is a tiny white border around the whole chart that I cannot for the life of me get rid of. The weird part is that it disappears when the data for the chart changes and it causes a re-render. This is what it looks like:
And this is what it's supposed to look like (seamlessly disappearing into the next div on the page):
It's probably one line in options that I need to change, but I can't figure out which line it would be. I thought it might be scale.[id].grid.zeroLineColor because the 3.x upgrade guide says this: "scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead." But I set color using the scriptable options like this:
grid: {
color: () => "transparent"
}
and that only fixed part of the issue. Because now the "zero line" isn't grey, but there still seems to be 1px of padding or something around the whole chart, on the bottom and on the right side.
I've set every other property I can think of.
Here's what the options look like right now:
const options = {
hover: { intersect: false },
borderWidth: 0,
clip: 0,
plugins: {
legend: {
position: "bottom",
align: "center",
display: false,
},
tooltip: {
intersect: false,
mode: "index",
callbacks: {
//This removes the tooltip title
// title: function () {},
label: ({ raw }) => {
return `$${formatNumber(raw)}`;
},
},
//this removes legend color
displayColors: false,
padding: 15,
position: "average",
pointHitRadius: 20,
pointRadius: 30,
caretSize: 10,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: rgbaStringFromRGBObj(palette.Vibrant.rgb, 0.35),
borderWidth: 2,
bodyFont: {
family: "Satoshi",
size: 18,
},
bodyColor: "#303030",
titleFont: {
family: "Satoshi",
},
titleColor: "rgba(0,0,0,0.6)",
},
},
scales: {
y: {
ticks: {
backdropPadding: 0,
display: false,
},
stacked: false,
grid: {
drawBorder: false,
borderWidth: 0,
drawTicks: false,
color: "transparent",
width: 0,
},
drawBorder: false,
drawTicks: false,
},
x: {
padding: 0,
ticks: {
display: false,
padding: 0,
mirror: true,
backdropPadding: 0,
},
grid: {
drawBorder: false,
drawTicks: false,
display: false,
},
drawBorder: false,
drawTicks: false,
},
},
maintainAspectRatio: false,
}
and here's a pull request with all the code in context.
This problem was happening for me when responsive was set to true in the chart's options because the width and height that the chart assumes is set to the "ones" place - it doesn't include decimals. Example:
vs.
The canvas rendered by ChartJS ignores the decimal-level specificity of its parent wrapper... Whether by bug or by design.
Solution
In my case, the aforementioned bug resulted in a small white line at the bottom of the chart.
I got around the problem by setting the parent's style to display: flex; and flexing the chart to the end with flex-direction: column; and justify-content: flex-end. Since the chart was slightly shorter than the parent, flexing it to the end (bottom) of its parent wrapper effectively "removed" the white line.
Generally: Experiment with positioning the chart with knowledge that it's probably a fraction of a pixel less wide/less tall than its parent.
I am using RGraph in our angular 7 application.
and able to show the 3d graphs and all.
I have a requirement to get index when user clicks on x axis labels.
Some times not able to update the graph data dynamically.(this issue is producing in when we deploy code in server but as a developer I have to fix it.)
please find in the below image.
Is it good way to remove and add same 3d graph for every user action so that overlapping will not come again.
I need x axis title and y axis title also.
If any one know kindly help me.
1.That's possible for a 2D chart by using two charts - the second positioned over the labels of the first. See this example:
https://codepen.io/rgraph/full/poEJKKm
There's an example of a 3D chart there too with the axes enabled.
<script>
labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
bar = new RGraph.Bar({
id:'cvs',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
marginInner: 10,
xaxisLabels: labels,
xaxis: false,
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false
}
}).draw();
bar2 = new RGraph.Bar({
id:'cvs',
data: [1,1,1,1,1,1,1,1,1,1,1,1],
options: {
xaxis: false,
yaxis: false,
backgroundGrid: false,
marginBottom: 10,
marginTop: 215,
colors: ['transparent'],
variantThreedXaxis: false,
variantThreedYaxis: false,
yaxisScale: false,
tooltips: '\0',
tooltipsHighlight: false
}
}).draw().on('click', function (e, shape)
{
alert(shape.dataset);
});
</script>
bar = new RGraph.Bar({
id:'cvs2',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
variant: '3d',
marginInner: 10,
xaxisLabels: labels
}
}).draw();
(Use the "change view" button to see the code)
Updating is just a case of setting the new data on the object:
myBar.data = [4,8,6,3,5,4,8,7,8,4,6,9];
And then calling the redraw method:
RGraph.redraw();
If you don't call the redraw method it won't change.
If you removing the chart from the ObjectRegistry too and there's not 1000 user actions then I suppose it would be OK. You can clear the ObjectRegistry with:
RGraph.ObjectRegistry.clear();
There are properties for that:
https://www.rgraph.net/canvas/bar.html#xaxis-properties
https://www.rgraph.net/canvas/bar.html#yaxis-properties
I've been tinkering with this and this code should work on the v5.26 libraries:
<script>
labels = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
bar = new RGraph.Bar({
id:'cvs1',
data: [8,4,6,3,5,4,2,8,6,4,2,2],
options: {
variant: '3d',
marginInner: 10,
xaxisLabels: labels,
backgroundGridVlines: false,
backgroundGridBorder: false
}
}).draw();
bar2 = new RGraph.Bar({
id:'cvs1',
data: [1,1,1,1,1,1,1,1,1,1,1,1],
options: {
xaxis: false,
yaxis: false,
backgroundGrid: false,
marginBottom: 10,
marginTop: 215,
colors: ['transparent'],
variantThreedXaxis: false,
variantThreedYaxis: false,
yaxisScale: false,
tooltips: '\0',
tooltipsHighlight: false
}
}).draw().on('click', function (e, shape)
{
alert(shape.dataset);
});
</script>
I'm trying to create a graph based on data from database using Chart.js, and I'm running into issues with making multiple labels for the data. One label is the month that the data is a part of, and the second label is the type of visit.
Here's what I have at the moment.
I'm doing this by adding in another label just for this one case:
xAxes: [{
position: 'top',
offset: 1,
ticks: {
fontColor: 'black',
beginAtZero: true,
fontSize: 35,
},
gridLines: {
display: false
},
},
{
labels: ["M SP W/I B", "M SP W/I B"],
position: 'bottom',
offset: 1,
ticks: {
fontColor: 'black',
beginAtZero: true,
fontSize: 35,
},
gridLines: {
display: false
},
}
]
Problem is it's too McGyvery. My plan is to add another Label for the dataset, besides the Month/Year and put the visit types there. This will deal with the problem where there's more or less than two months on the graph.
What I would really like to do is make it so that each bar has the label underneath it (I've already tried with the label on the bar next to the number, and it does not look good). And also I would like to get rid of the empty spaces left by the 0 value bars that would be amazing, which has already been asked.
Here is an example of what I'm trying to get at.
Is there any way to do this with Chart.js?
To start, I have made a short video to show exactly what I'm running into.
To summarize the video: while using Chart.js (2.6.0), I can create my charts without issue; but when I mouse-over the bars/points, the chart will resize its elements and flicker. The weird thing is that it's totally inconsistent. Sometimes when I refresh, it doesn't have this behaviour at all; but if I hover over something and it starts doing it, it won't stop until I refresh again or close out of the tab (it is inconsistent with this, also). I don't change anything in the code when this occurs, it does this all on its own.
In an attempt to fix it, I've referenced many other threads here on SO, as well as the Chart.js documentation. Among my solutions: I have made a point to add in a specified Height/Width to the Divs & Canvas creating the graphs; Set the Animation duration to 0, the Hover Animation duration to 0, and the Responsive Animation duration to 0; I've ensured that Responsive is set to true, and have kept Maintain Aspect Ratio as true, changed the tooltip mode... I've tried all of these, among other little things that seem to have little-to-no effect.
I'm stumped!
Here is one of my charts' code (without how I'm grabbing the JSON data etc, just the Chart):
new Chart($("#runwayChart"), {
type: "horizontalBar",
data: {
labels: runwayLabels,
datasets: [{
label: "Months Left", fill: true,
backgroundColor: "#3333ff",
borderColor: "#3333ff",
data: score
}, {
label: "Expenses",
fill: true,
backgroundColor: "#aa2222",
borderColor: "#aa2222",
data: expenses
}, {
label: "Revenue",
fill: true,
backgroundColor: "#2222aa",
borderColor: "#2222aa",
data: revenues
}]
},
options: {
tooltips: {
mode: 'index'
},
responsive: true,
maintainAspectRatio: true,
animation: {
duration: 0,
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0
}
});
I'd appreciate any help you all may have!
Thanks =)
I see that it has been a while since somebody wrote an answer to this post. I solved my flickering issue by applying two things.
First one
When I declare the chart I use:
var ctx = document.getElementById('chart').getContext('2d');
window.chart = new Chart(ctx, {}) ...
rather than var chart = new Chart(ctx, {})..
In this way, we make sure that the chart has been appended to the window. object.
Secondly
Before drawing the new diagram (For example for data update) we need to make sure that the previous canvas has been destroyed. And we can check that with the code below:
if(window.chart && window.chart !== null){
window.chart.destroy();
}
It was actually a really simple, and odd solution.
When the data point was near the top of the chart, the chart would try to resize depending on the div. As the chart lived in a larger canvas, putting inside its own div solved this issue.
<div>
<canvas id="chart"></canvas>
</div>
Formatting it like this was the solution =)
Try This :
var myLineChart = null;
function createChart() {
var ctx1 = document.getElementById("barcanvas").getContext("2d");
myLineChart = new Chart(ctx1, {
type: 'horizontalBar',
data: {
labels: runwayLabels
, datasets: [{
label: "Months Left"
, fill: true
, backgroundColor : "#3333ff"
, borderColor: "#3333ff"
, data: score
}, {
label: "Expenses"
, fill: true
, backgroundColor : "#aa2222"
, borderColor: "#aa2222"
, data: expenses
}, {
label: "Revenue"
, fill: true
, backgroundColor : "#2222aa"
, borderColor: "#2222aa"
, data: revenues
}]
}
options:
{
scales: {
xAxes: [{
ticks: {
callback: function (tick) {
var characterLimit = 20;
if (tick.length >= characterLimit) {
return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim() + '...';
}
return tick;
}
}
}]
},
tooltips: {
callbacks: {
// We'll edit the `title` string
title: function (tooltipItem) {
// `tooltipItem` is an object containing properties such as
// the dataset and the index of the current item
// Here, `this` is the char instance
// The following returns the full string
return this._data.labels[tooltipItem[0].index];
}
}
},
title:
{
display: true,
text: "Your Chart Title"
},
responsive: true,
maintainAspectRatio: true
}
});
}
I had the same issue with my angular application(angular v6 and chartjs 2.9.4).
After adding delay and destroying the chart instance before redrawing the chart resolved my issue.
public redraw() {
setTimeout(() => {
if (this.chart && this.chart != null) {
this.chart.destroy()
}
this.chart = new Chart(this.chartId, this.chartConfig);
}, 500);
}