I have a line chart like this :`
series: [{
data: [
['A', 29.9],
['B', 71.5],
['C', 106.4]
],
name: 'l1'
},
{
data: [
['A', 33.9],
['B', 22.5],
['C', 77.4]
],
name: 'l2'
},
{
data: [
['A', 55.9],
['B', 21.5],
['C', 134.4]
],
name: 'l3'
}]
http://jsfiddle.net/m1utpa41/
and I want to draw its line chart by percentage not by absolute value, how can I do that ?
Set stacking to percent and optionally you could set valueSuffix for tooltip.
...
plotOptions: {
series: {
stacking: 'percent'
}
},
tooltip: {
valueSuffix: '%'
},
...
JSFiddle: http://jsfiddle.net/m1utpa41/3/
There is also an example in stacking API reference - Line with "percent" stacking demo
Edit:
However, if you want to get a series that will have each data point set as percentage value of summarized data of the series, then there is no default option that would allow this feature, but you could just process you data.
Example: http://jsfiddle.net/oxja7u7k/
Related topic on Highcharts forum.
Related
I would like to make a chart with labels on xAxes and the same labels in the legend. I was trying different solutions, but the best I got is the snippet below. I don't understand, why all bars are connected with my first label. Could you please help me to fix it?
I found a solution with would be almost perfect here, but unfortunately, it doesn't work as expected: after clicking on the label in legend all charts are hiding, not only one corresponding to the label I clicked.
var canvas2 = document.getElementById("wykres_kategorie");
var ctxD2 = canvas2.getContext('2d');
var myLineChart = new Chart(ctxD2, {
type: 'bar',
data: {
labels: [
'a','b','c'
],
datasets: [
{
label: 'a',
data: [ 60 ],
backgroundColor: [ 'red' ],
},
{
label: 'b',
data: [ 80 ],
backgroundColor: [ 'blue' ],
},
{
label: 'c',
data: [ 50 ],
backgroundColor: [ 'yellow' ],
},
]
},
options: {
legend: {
position: 'bottom'
},
responsive: true,
scales: { xAxes: [{
ticks: {
autoSkip: false
} }],
yAxes:[{ ticks: {beginAtZero: true}}]}
}
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.20.0/js/mdb.min.js"></script>
<canvas class='col-12 mx-auto' id="wykres_kategorie"></canvas>
The data.labels defines the ticks for a category axis. Following your configuration, the chart is expecting to have 3 data items for dataset, (first at tick 'a', second at tick 'b', third at tick 'c').
Instead, the dataset.label are used in the legend.
In your config, all datasets have got only 1 value and all values are related to the first data.labels, 'a'.
I want to change de color of the bar columns on my chart when the xaxis value is a weekend day.
Here is a sample of my data:
[
[
1564034400000,
291681
],
[
1564120800000,
1533580
],
[
1564207200000,
985398
],
[
1564293600000,
451679
],
[
1564380000000,
1051938459
],
[
1564466400000,
1486601
],
[
1564552800000,
1712150
],
[
1564639200000,
1719820
],
[
1564725600000,
2142532
],
[
1564812000000,
1332015
]
]
i've tried this ():
data.forEach(x => {
ndata.push([x.date, x.eApar]);
if(x.date.getDay()==0 || x.date.getDay()==6){
bcolor="orange"
}
else
{
bcolor="";
}
});
and then on the chart building i have this:
plotOptions: {
series: {
color: bcolor
},
series: [{
data: ndata,
type: 'column',
}],
But it change the color of all the columns.
I hope you can help me, thanks!
You could try setting your data on two different series (with missing values on the days according to weekdays or weekend days), then defining color for each serie like here:
series: [
{
name: 'weekend',
color: '#ffffff',
data: [null, null, null, null, null, value, value]
}
];
series: [
{
name: 'weekdays',
color: '#f20303',
data: [value, value, value, value, value, null, null]
}
];
EDIT:
There is a better yet solution in the answer to this very problem given by #eolsson here: How do you change the colour of each category within a highcharts column chart?. Give the different points a color attribute like this:
data: [
{y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20]
I try to build a simple bar chart using chart.js with 2 x-axis: One on top and other on bottom.
The problem is two axis label and grid is not align. The top x-axis is align center and bottom x-axis is align left.
Please help me to make two x-axis align center. Thanks!
Fiddle:
jsfiddle.net/gtmvkq4n/2/
Screenshot:
You may be looking after the offset option
Example with multiple datasets:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'somelabel',
xAxisID:'bar-x-axis1',
data: [40, 50, 30, 12, 52]
},
{
// ... other dataset...
}]
},
options:{
scales:{
xAxes:[
{
id:'bar-x-axis1',
type:'category',
offset: true // <== that one!
},
{
// ... other X axis...
}]
}
}
});
http://www.chartjs.org/docs/latest/axes/cartesian/
Make your bar graph contains proper groupSpace, barSpace, barWidth
(groupSpace * barSpace) * n + groupSpace = 1
Make this equation is correct, given n is the number of bars
I tried to create the dynamic height in high chart's drill down. Depends on data. Then chart type is bar chart.
For example
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
], $("#container").css({'height':'500px'}) // here i want to change
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
], $("#container").css({'height':'300px'}) // here i want to change
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
], $("#container").css({'height':'400px'}) // here i want to change
}]
}
It is possible to add the jQuery into series section. I mentioned above. Or else any possible way for to do it?
You can catch drilldown event and then call setSize function.
chart: {
type: 'bar',
events: {drilldown:function(a){ this.setSize(300, a.seriesOptions.data.length*100) }}
}
drilldown function is trigger as an when user is click on individual bar and argument "a" is holding the series data of that particular bar which user has click, and I've calculate the length of that data with "a.seriesOptions.data.length*100" and 100 is 100px, so if length is 2 then 2*100px = 200px.
Please tell me what the problem is, constantly displays 01.01.xxxx, although in the tooltip correct date.
jsfiddle
$('#container').highcharts({
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d %m %Y', this.value);
}
},
},
series: [{
name: 'reg',
data: [[1392760800000, 60], [1420149600000, 3]] // 1392760800000 - 18.02.2014, 1420149600000 - 02.01.2015
}, {
name: 'app',
data: [[1392760800000, 0], [1420149600000, 0]]
}, {
name: 'dec',
data: [[1392760800000, 0], [1420149600000, 0]]
}, {
name: 'deac',
data: [[1392760800000, 60], [1420149600000, 3]]
}]
});
Axis labels are displayed not for columns but for beginning of years because of size of chart and scale of x axis.
You could fix that i.e. by setting positions for x axis ticks.
Example: http://jsfiddle.net/awhr7y74/2/
For this you can use tickPositions (used in example) or alternatively - tickPositioner.
See API for more information - http://api.highcharts.com/highcharts#xAxis.tickPositioner