Related
the version of Chart JS is 3.7.0
I am looking for a way to make my chart's points look from this:
to something like this:
I found out that there is an option in this library where you can set the points to a certain shape. e.x: pointStyle: 'rectRot' will make the points appearance look like this:
Is there an option or a way to achieve what Im looking for? (Check the second picture).
Thanks in advance!
My chart's javascript:
const data = {
datasets: [
{
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
data: [
{ x: 'Dec 27', y: 0.204 },
{ x: '01:00', y: 0.234 },
{ x: '02:00', y: 0.274 },
{ x: '03:00', y: 0.234 },
{ x: '04:00', y: 0.304 },
{ x: 'Dec 28', y: 0.506 },
],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: '#2d84b4',
pointHoverBorderColor: '#2d84b4',
},
],
};
const config = {
type: 'line',
data: data,
options: {
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
plugins: {
//Do not display legend.
legend: {
display: false,
},
},
scales: {
xAxes: {
stacked: true,
ticks: {
stepSize: 2,
},
grid: {
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: true,
tickLength: 4,
type: 'time',
},
},
yAxes: {
grid: {
drawBorder: false,
drawTicks: false,
},
},
},
elements: {
point: {
radius: 5,
},
},
},
};
// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
myChart.resize();
});
//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;
The points seemed to work just fine with your transparent background, only on hover you setted a normal background again so the pointHoverBackgroundColor should also be transparent.
To make the point bigger on hover you can use the hoverRadius and to make the line have the same width you can use the pointHoverBorderWidth:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBorderColor: '#2d84b4',
hoverRadius: 10,
pointHoverBorderWidth: 2
}]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
I am trying to plot multiple line charts on a graph and I have a toggle to disable / enabled some of the plots. I am destroying / updating whenever required but when I see a particular plot separately, I can see a different plot but when its a mixed graph, the line shows a different plot.
Example fiddle : https://jsfiddle.net/njmr15w9/ ( You can try to comment first two plots from the dataset array and you can see how the green plot changes and shows incorrect points, which should not be the case )
labels: [1, 2, 3, 4, 5,6,7,8],
datasets: [
{
label: "Set 1",
data: [10, 20, null, 40, 30,null,20,40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60,null,50,20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
{
label: "Set 2",
data: [40, 50, 30, 30, 20,null,60,40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});
I followed your instructions and commented out the first two datasets. The result looks fine to me.
const chartData = {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
/*
{
label: "Set 1",
data: [10, 20, null, 40, 30, null, 20, 40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60, null, 50, 20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
*/
{
label: "Set 2",
data: [40, 50, 30, 30, 20, null, 60, 40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart(document.getElementById('demo'), {
type: 'line',
data: chartData,
options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="demo" height="90"></canvas>
UPDATE
The problem lies in the fillBetweenLinesPlugin that simply doesn't work correctly when only one line is drawn. This can easily be fixed by changing the condition in the for loop by adding datasets.length > 1 as follows.
for (var d = 0; datasets.length > 1 && d < datasets.length; d++) {
...
}
I created a doughnut chart. Is there any chance to make that colors like gradient ? I saw this post, I tried to implement on my own chart but I could not.
Any help, I will be grateful.
var ctx = $('#teamDoughnutChart');
var doughnutBar = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Status",
backgroundColor: [
'rgba(192, 57, 43,1)',
'rgba(244, 187, 18, 1)',
'rgba(41, 128, 185,1)',
'rgba(39, 174, 96,1)',
'rgba(191, 199, 215, 1)'
],
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38, 96, 79, 41]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
<canvas id="teamDoughnutChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a same problem. I found solution. Try this
var canvas = $('#teamDoughnutChart');
var ctx = canvas.getContext('2d');
var gradientColors = [
{
start: '#f3bb98',
end: '#ea8ba9'
},
{
start: '#F6A064',
end: '#ED5384'
}
];
var gradients = [];
gradientColors.forEach( function( item ){
var gradient = ctx.createLinearGradient(0, 0, 150 , 150);
gradient.addColorStop(0, item.start);
gradient.addColorStop(1, item.end);
gradients.push(gradient);
});
var doughnutBar = new Chart(canvas, {
type: 'doughnut',
data: {
labels: ["A", "B"],
datasets: [{
label: "Status",
backgroundColor: gradients,
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
I have created a simple plotly line graph as follows:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"x-axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
range:[0,20],
autorange: false
},
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line:{
color: 'rgb(255, 0, 0)',
width: 2,
dash:'dot'
},
},
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line:{
color: 'rgb(0, 255, 0)',
width: 2,
dash:'dot'
},
}
]
};
Plotly.newPlot(myDiv,[trace1],layout);
Now, I want to add a name or label to the threshold1 and threshold2 that I have created in 'shapes' under 'layout'. I searched the plotly JS documentation but did'nt get anything useful there. How can I do this. Any help would be appreciated.
You could create another trace with mode: 'text'. There is certainly more than one way of doing it but this one is simple and does not need complicated data replication.
var threshold1 = 12;
var threshold2 = 16;
var offset = 0.75;
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var trace2 = {
x: [Math.min.apply(Math, trace1.x) + offset,
Math.max.apply(Math, trace1.x) - offset],
y: [threshold1 - offset, threshold2 - offset],
mode: 'text',
text: ['lower threshold', 'upper threshold'],
showlegend: false
}
var layout = {
xaxis: {
title: "x-axis",
tickangle: 45,
rangemode: 'nonnegative',
autorange: true,
exponentformat: "none"
},
yaxis: {
title: "Time",
tickangle: 45,
rangemode: 'nonnegative',
range: [0, 20],
autorange: false
},
shapes: [{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line: {
color: 'rgb(255, 0, 0)',
width: 2,
dash: 'dot'
},
}, {
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line: {
color: 'rgb(0, 255, 0)',
width: 2,
dash: 'dot'
},
}]
};
Plotly.newPlot(myDiv, [trace1, trace2], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
You can use annotations:
layout.annotations = [
{
showarrow: false,
text: "Your text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold1,
yanchor: "bottom"
},
{
showarrow: false,
text: "Your second text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold2,
yanchor: "bottom"
}
],
Add just name property to your trace like
name = 'Xyz'
This Link might help you to fix it out.
I want to create a chart with a bar inside of a stacked bar as seen on the image bellow.
I managed to put the column inside of the column but, I can't make it work for the bar. How can I put the bar inside of the stacked bar?
My code - JsFiddle
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
},
title: {
text: 'Test %'
},
xAxis: {
categories: ['2014', '2013', '2012', '2011']
},
yAxis: {
opposite: true,
labels: {
format: '{value}%',
},
},
plotOptions: {
series: {
stacking: 'normal'
},
column: {
stacking: 'percent'
}
},
legend: {
enabled: false
},
series: [{
name: 'red',
type: 'bar',
data: [70, 70, 70, 70],
color: 'rgba(253, 155, 155, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'yellow',
type: 'bar',
data: [5, 5, 5, 5],
color: 'rgba(255, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'green',
type: 'bar',
data: [25, 25, 25, 25],
color: 'rgba(204, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'Value',
type: 'bar',
data: [35, 30, 25, 20],
color: 'rgba(126,86,134,.9)',
pointPadding: 0.35,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
format: '{y}%'
},
}]
});
Any help appreciated.
You could set grouping to false, so all stacks will be placed on top of each other - overlap each other.
Example: http://jsfiddle.net/zs6juetp/2/
plotOptions: {
series: {
grouping: false
...
API reference: plotOptions.bar.grouping
It looks like you're making a bullet graph.
I have examples of this here:
http://jsfiddle.net/jlbriggs/UGs2E/17/
.
plotOptions:{
bar:{
grouping: false,
shadow:false,
borderWidth:0,
pointPadding:.25,
groupPadding:0
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:9,
lineColor:'#333'
}
}
}
Also uses a function to extend the marker object for the target line, on a scatter series:
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};