I'm using ChartJS v4.0.1. They've implemented a new option to curve the line chart named tension. But it looks so weird.
The option value works between 0 and 1, I've tried several options to make the Chart more beauty and here we are:
tension: 0.1
tension: 0.5
tension: 1
So my question is, what can I do to make the chart more "smooth", something like this:
Thank you!
You should use cubicInterpolationMode. It is documented here: Line Chart | Chart.js
Your line looks a bit smoother here:
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [{
label: 'Dataset',
data: [1, 3, 2, 1, 1, 1, 2, 2, 2, 2],
cubicInterpolationMode: 'monotone' // <--- HERE
}]
},
options: {
scales: {
y: {
type: 'category',
labels: [1, 2, 3]
}
}
}
});
.chart-container {
position: relative;
height: 90vh;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.0.1"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
Related
I struggle to let my second y-Axis scale to my second data array.
The green data should be scaled according to the right y-Axis (not working).
The red data is correctly scaled to the left y-Axis.
<div id="chartWrapper" class="card-content column is-two-thirds">
<canvas id="myChart" height="250px"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
datasets: [{
label: 'Temperatur in C°',
yAxisID: 'A',
borderColor: "red",
data: 0
},
{
label: 'Niederschlagsmenge in mm',
yAxisID: 'B',
borderColor: "blue",
data: 0
}]
},
options: {
scales: {
A: {
type: 'linear',
beginAtZero: false,
position: 'left',
display: true
},
B: {
type: 'linear',
beginAtZero: false,
position: 'right',
display: true
}
}
}
});
</script>
</div>
Don't be confused with the data being 0, I add the data dynamically.
Thank you very much for any help.
This is because you are using V2 of chart.js in which the scales need to be configured as arrays like so:
new Chart(ctx, {
type: 'line',
data: {},
options: {
scales: {
yAxes: [{
id: 'A'
}, {
id: 'B'
}]
}
}
})
For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions
I'm wondering if it is possible to have a graph with multiple lines, but I want one of the lines to start from the middle of the graph, while the rest of the lines still start from all the way at the left. Is this possible? It'd look like this:
The green line is what I am talking about, whether it would be possible for a dataset to start from not all the way at the left
Yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null values in the start of your data array:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: 3,
y: 6
}, {
x: 4,
y: 8
}, {
x: 5,
y: 2
}, {
x: 6,
y: 12
}],
borderColor: 'orange'
},
{
label: '# of Points2',
data: [null, null, null, 9, 13, 15],
borderColor: 'lightblue'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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.5.0/chart.js"></script>
</body>
You can quickly do this with offset option.
Example:
const options = {
...otherChartOptions,
scales: {
x: {
offset: true
},
y: {
offset: true
}
}
};
Reference: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
I have created the following radar chart using this code. Codepen
data = [{
type: 'scatterpolar',
r: [39, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself'
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
Which results in this:
How can I set the color of each of the dots shaping the polygon?
With this tool, online graph maker, it seems you can set the colors on a scale, but I would like to set each on of the dots separately,
Any direction to how to customize the rest of the elements will be very helpful.
Thanks.
#myDiv path.point{
fill: blue !important;
}
And if you want to further customize the colors you can use CSS :nth-of-type(n) modifier https://www.w3schools.com/cssref/sel_nth-of-type.asp
data = [{
type: 'scatterpolar',
r: [37, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself',
marker : { color : '#B80102'}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
#myDiv path.point{
fill: blue !important;
}
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
There are ton of possible configurations, and exploring you can get a an idea of any possible setup you might think of. Plotly is truly amazing.
For the configuration I was trying to do this is the configuration:
You can try it on the codepen
data = [{
type: 'scatterpolar',
mode : "markers+lines",
line : {
color : "rgb(158, 27, 66)",
width : "2",
dash : "solid",
shape : "linear"
},
r: [5, 1, 3, 2, 4, 3, 3, 2, 4, 3, 2, 3, 3, 2, 4, 2, 2],
theta: ['Tecnologia','Innovacion','Optimismo Digital', 'Transformador', 'Atracc. y desarrollo de talento', 'Referente', 'Etica y honestidad',
'Personas', 'Aprendizaje Continuo','Promocion del aprendizaje', 'Emprendedor', 'Escucha', 'Comunica y comparte', 'Mejora continua',
'Base tecnica y rigor', 'Logro', 'Crecimiento rentable' ],
fill: 'toself',
fillcolor: 'rgba(255, 0, 0, 0.6)',
marker : { color : [8, 8, 8, 2, 2, 6, 6, 6, 4, 4, 4, 5, 5, 5, 3, 3, 3 ],
colorscale : [
[0, '#38C041'], [0.125, '#DDD01B'], [0.25, '#c7e9b4'], [0.375, '#7fcdbb'], [0.5, '#41b6c4'], [0.625, '#1d91c0'], [0.75, '#225ea8'], [0.875, '#253494'],[1, '#081d58']
],
size : 10
}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 7]
}
},
showlegend: false,
width: 800,
height: 700,
margin:{
l : 0,
r : 0,
t : 100,
b : 0,
pad : 0,
autoexpand : true
}
}
I have a code to plot a highcharts on my website, I need to plot multiple charts on same div(container), so please guide to reach this, below is my code
$('#container').highcharts('StockChart', {
chart: {
borderColor: 'black',
borderWidth: 0,
borderRadius: 10,
height:150
},
I tried this for append $('#container').append.highcharts('StockChart', but it seems like a wrong syntex,please share your answer,thanks
Taken directly from highcharts documentation pages:
To combine several chart types in one chart you only need to create series of different types:
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33]
}]
JSfiddle example.
Repeat the following process for each child chart you need.
var chartDiv = document.createElement('div'); // Create a new div
$('#container').append(chartDiv); // Append it to your container
$(chartDiv).highcharts(.....); // Initialize highcharts in that div