I am trying to create a bar chart with the columns aligned to the left using the PrimeNg p-chart. I started with the stacked graph on http://primefaces.org/primeng/chart/bar.
This is my current graph:
Desired look:
I have tried using categoryPercentage: 0.99, and barPercentage: 1.0 from How to align ChartJS bars to the left?. These didn't create my desired look as they expanded the column to the full width. I want to have smaller width columns and shift them over to the left. Are there any properties that can be used to achieve this effect? Are there any alternatives to ChartJS properties?
this.stackedData =
[{
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '200',
backgroundColor: '#003D79',
data: [
50,
55,
78,
48,
90,
76,
42
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '400',
backgroundColor: '#AC0000',
data: [
21,
4,
24,
75,
37,
65,
34
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '401',
backgroundColor: '#E80000',
data: [
41,
0,
24,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '402',
backgroundColor: '#5C0000',
data: [
41,
52,
0,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: 'Other',
backgroundColor: '#D5D5D5 ',
data: [
]
}];
this.stackedOptions = {
plugins: {
tooltips: {
mode: 'index',
intersect: false
},
legend: {
position: 'bottom',
align: 'end',
labels: {
usePointStyle: 'circle',
}
},
},
scales: {
x: {
stacked: true,
grid: {
display: false
},
ticks: {
maxRotation: -45,
minRotation: -45,
padding: 30,
}
},
y: {
stacked: true,
grid: {
drawBorder: false,
lineWidth: 0.5,
}
}
}
};
I am trying to create a mixed stacked horizontal bar chart and line chart in Charts.js 3.2.0.
Expected behaviour: one axis at the bottom for the stacked bars including axes title and one axis at the top for the line chart.
Actual behaviour: all axes on the bottom with an additional extra axis displayed that doesn't seem to correspond with any dataset. No axes titles displayed.
Notes: the code has zero values for a few bars, these can be non-zero depending on data that is generated.
My code:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
data: {
labels: ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", ],
datasets: [{
type: "line",
label: "Earnings",
xAxisID: "A1",
data: [10000, 20000, 30000, 5000]
},
{
label: "CAT 1",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(255,59,59, 0.2)"],
borderColor: ["rgba(255,59,59, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 2",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(241,85,54, 0.2)"],
borderColor: ["rgba(241,85,54, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 3",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(235,106,55, 0.2)"],
borderColor: ["rgba(235,106,55, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 4",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(227,131,53, 0.2)"],
borderColor: ["rgba(227,131,53, 1)"],
borderWidth: 1,
data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
},
{
label: "CAT 5",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(221,171,54, 0.2)"],
borderColor: ["rgba(221,171,54, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 6",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(218,199,52, 0.2)"],
borderColor: ["rgba(218,199,52, 1)"],
borderWidth: 1,
data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
},
{
label: "CAT 7",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(192,224,66, 0.2)"],
borderColor: ["rgba(192,224,66, 1)"],
borderWidth: 1,
data: [0, 0, 0, 14.921666666667, 0, 0, ]
},
{
label: "CAT 8",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(124,236,93, 0.2)"],
borderColor: ["rgba(124,236,93, 1)"],
borderWidth: 1,
data: [40.216666666667, 0, 0, 0, 0, 0, ]
},
]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
x: [
{
display: true,
position: "top",
type: "linear",
title: {
text: "cost",
display: true,
},
beginAtZero: true,
id: "A1",
},
{
id: "B1",
position: "bottom",
title: {
text: "hours",
display: false,
},
beginAtZero: true
}
],
y: {
display: true,
stacked: true,
//beginAtZero: true
}
}
}
});
</script>
jsfiddle
Screenshot of current behaviour
The x and y axis are no arrays anymore in v3, all scales are an object and you define the place with the position argument, also you dont specify the id in the object but the object key is the id
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
data: {
labels: ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", ],
datasets: [{
type: "line",
label: "Earnings",
xAxisID: "A1",
data: [10000, 20000, 30000, 5000]
},
{
label: "CAT 1",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(255,59,59, 0.2)"],
borderColor: ["rgba(255,59,59, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 2",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(241,85,54, 0.2)"],
borderColor: ["rgba(241,85,54, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 3",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(235,106,55, 0.2)"],
borderColor: ["rgba(235,106,55, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 4",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(227,131,53, 0.2)"],
borderColor: ["rgba(227,131,53, 1)"],
borderWidth: 1,
data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
},
{
label: "CAT 5",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(221,171,54, 0.2)"],
borderColor: ["rgba(221,171,54, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 6",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(218,199,52, 0.2)"],
borderColor: ["rgba(218,199,52, 1)"],
borderWidth: 1,
data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
},
{
label: "CAT 7",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(192,224,66, 0.2)"],
borderColor: ["rgba(192,224,66, 1)"],
borderWidth: 1,
data: [0, 0, 0, 14.921666666667, 0, 0, ]
},
{
label: "CAT 8",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(124,236,93, 0.2)"],
borderColor: ["rgba(124,236,93, 1)"],
borderWidth: 1,
data: [40.216666666667, 0, 0, 0, 0, 0, ]
},
]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
A1:
{
display: true,
position: "top",
type: "linear",
title: {
text: "cost",
display: true,
},
beginAtZero: true,
id: "A1",
},
B1: {
id: "B1",
position: "bottom",
title: {
text: "hours",
display: false,
},
beginAtZero: true
},
y: {
display: true,
stacked: true,
}
}
}
});
</script>
fiddle: https://jsfiddle.net/Leelenaleee/7agx5hkr/1/
How to use the visualMap to color lines based on their value on the X-axis. I want to color red for all values greater than 23 and green for all values greater than 23.
My script looks like the following:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main_chart'));
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
visualmap: {
show: false,
dimension: 0,
min: 0,
max: 10,
range: [0, 23],
inRange: {
color: 'red'
},
outOfRange: {
color: 'green'
}
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html
Unfortunately this doesn't work like this.
In general, there is a good description somewhere how this works with the visualMap, in the official documentary of echarts I don't get it.
I assume you want to color red for all values less than 23 and green for all values greater than 23.
you can use visualMap like this
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}],
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>
I have to hide / remove all data points except the second last point as shown in this image I have searched everywhere but couldn't find the proper solution to achieve this.
myChart.datasets[0].points[0].display = false;
legStretchtCtx.update();
Above snippet is for Chart.js Version 1.0 but I'm using Chart.js Version: 2.7.1 . I have used this snippet but its giving an error:
Cannot read property '0' of undefined
var legStretchtCtx = document.getElementById("leg-stretch-chart");
// var legStretch =
var myChart = new Chart(legStretchtCtx, {
type: 'line',
data: {
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6","Day 7"],
datasets: [{
label: 'Leg Stretch',
data: [3, 4, 5, 4, 3, 3.5, 3.5],
backgroundColor:"#70d6db",
borderColor: ["#70d6db"],
borderWidth: 4,
pointBackgroundColor: "#fff",
pointRadius: 8,
pointHoverRadius: 8,
pointHoverBackgroundColor: "#0ba8b0",
pointHoverBorderColor: "#26c1c9",
pointBorderColor:"#26c1c9"
}]
},
options: {
legend: {
display: false,
labels: {
display: true
}
},
responsive:true,
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder:false,
},
ticks: {
display: false,
fontFamily: "Montserrat",
fontColor: "#2c405a",
fontSize: 12
}
}],
yAxes: [{
gridLines: {
display: false,
drawBorder:false,
},
ticks: {
display: false,
fontFamily: "Montserrat",
fontColor: "#2c405a",
fontSize: 12,
stepSize:1,
min: 0,
max: 10,
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="leg-stretch-chart-inner">
<canvas id="leg-stretch-chart" width="100%" height=""></canvas>
</div>
</div>
First, change pointRadius to array:
pointRadius: [8, 8, 8, 8, 8, 8, 8]
Then, you have to rewrite this array with specific values for each point (in our case, the second last pont) and update:
$("#btnRemovePoints").click(function()
{
//change the radius of every point except one
myChart.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
myChart.update();
});
More details in this fiddle: https://jsfiddle.net/s7m1961t/
$( document ).ready(function() {
//My Chart 1
myChart1.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
myChart1.update();
//My Chart 2
myChart2.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
myChart2.update();
});
I have recently started on Kendo-UI.
I have the following bar charts. I would like to add the draw lines that connects bar charts as shown in the second figure.
Here is what I have:
Here is what I wish to achieve:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Hybrid car mileage report"
},
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 100
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Here is my jsfiddle: http://jsfiddle.net/mskjbLwx/
Add two another series with type: line to connect bar.
See example: JSFiddle, may be that help you.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Hybrid car mileage report"
},
legend: {
position: "top"
},
transitions: true,
series: [{
type: "line",
missingValues: "interpolate",
markers: {
visible: false
},
data: [10, 20, 30, 40, 50],
stack: true,
tooltip: {
visible: true
},
name: "on battery",
color: "orange",
visibleInLegend: false
}, {
type: "column",
data: [10, 20, 30, 40, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "line",
missingValues: "interpolate",
markers: {
visible: false
},
data: [5, 15, 25, 35, 45],
stack: true,
tooltip: {
visible: true
},
name: "on gas",
color: "green",
visibleInLegend: false
}, {
type: "column",
data: [5, 15, 25, 35, 45],
stack: true,
name: "on gas",
color: "#0399d4"
}],
valueAxes: [{
title: {
text: "miles"
},
min: 0,
max: 100
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<base href="http://demos.telerik.com/kendo-ui/area-charts/multiple-axes">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"> </script>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>