Im currently developing a Pie Chart with ChartJS (3.9.1) and react-chartjs-2 wrapper,
my chart is using full-width.
I want my chart to stick to the left side, to be able to show more than 12 options. How can I stick the Pie Chart to the left? I've tried using padding:0 already (ref. config).
My options config for the Pie Chart is:
const optionsPie = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 0,
right: 0,
},
},
plugins: {
legend: {
position: 'right' as const,
},
},
};
Related
I've created a pie chart using the chart.js and react-chartjs-2 library but I was wondering if there is a way to display the data over the chart component and not as a tooltip while hovering about each area of the pie chart
What I wanted to do is display the data related to each area over itself, like on top of it.
The options can be added while creating new chart
var pieChart = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: true,
position : 'top'
},
tooltips: {
enabled: false
}
}
});
const myLineChart = new Chart(viewsCount, {
type: 'line',
data: lineChartStats.data,
options: {
elements: {
line: {
tension: 0 // disables bezier curves
},
point: {
pointStyle: 'line'
}
},
legend: {
display: true,
position: "top",
align: "start",
labels: {
boxHeight: 3
usePointStyle : true,
}
}
}
Chartjs - Changing legend as a line with pointsyle of circle? What can I do to style the legend I'm using latest cdn of chartjs
Please read the migration guide to chart.js version 3, it has some.breaking changes for example legend config has been moved to the plugins section so you will have to do options: { plugins: { legend: {} } }
After that it should work, otherwise they have an example online where you can look at to see what's different https://www.chartjs.org/docs/latest/samples/legend/point-style.html
It is possible to realize a smooth animation when changing the pie chart data? I did something similar before with scatter plots, indicators and bar charts, but my solution does not work for pie charts.
So, is a smooth animation possible with plotly js? Are pie charts not supported yet?
Codepen example: https://codepen.io/michaelkonstreu/pen/yLaEBJr
Draw chart:
function drawChart() {
generateRandomValues();
let graph = document.querySelector('#graph');
let plotWidth = graph.getBoundingClientRect().width;
let plotHeight = graph.getBoundingClientRect().height;
let data = [{
type: "pie",
values: VALUES,
labels: LABELS,
textinfo: 'percent',
automargin: true,
}];
let layout = {
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
width: plotWidth,
height: plotHeight,
margin: { "t": 0, "b": 0, "l": 0, "r": 0 },
showlegend: true,
}
Plotly.newPlot(graph.id, data, layout, { displaylogo: false, responsive: true, staticPlot: true });
}
Animate chart:
function updateChart(){
generateRandomValues();
Plotly.animate('graph', {
data: [
{
y: VALUES,
x: LABELS,
}
],
traces: [0]
},
{
transition: {
duration: 750, easing: 'cubic-in-out'
}
}
)
}
Has the documentation's says (updated instantaneously)
Currently, only scatter traces may be smoothly transitioned from one
state to the next. Other traces are compatible with frames and
animations but will be updated instantaneously.
https://plotly.com/javascript/animations/
Hi How to always display tooltips on pie chart using angular chart.
I'm trying using this part of code:
$scope.options = {
showToolTips: true,
tooltipEvents: [],
onAnimationComplete: function() {
this.showTootip(this.datasets[0].bars,true);
},
tooltips: {
backgroundColor: "transparent"
}
};
But it doesn't work. Here is my example of chart. https://jsfiddle.net/vz4qhqpw/115/
I am using Rubix - ReactJs Powered Admin Template for the project development. Also, I am using d3.js to render various charts. As the labels on x-axis are horizontally aligned they are merging into each other.
Here is my code snippet to create a area_series chart:
var chart = new Rubix('#slcnm', {
width: '100%',
height: 200,
title: 'Data Load Frequency',
subtitle: 'no markers',
titleColor: '#0054A9',
subtitleColor: '#0054A9',
axis: {
x: {
type: 'datetime',
tickFormat: '%d-%b-%Y'
}
},
tooltip: {
color: '#0054A9',
format: {
x: '.0f',
y: '.0f'
}
}
});
var area = chart.area_series({
name: 'Marketing Automation',
color: '#804000',
marker: 'circle'
});
Which property should I use to rotate the labels on x-axis are they will be more presentable when the chart is rendered.