I have created a chart with Chart.js, and I now need to show the data in the legend differently per the two different datasets.
How do I show the first dataset 'Low/High Range Limit' in the classic rectangle/fill style and the dataset 'Patient Results' in the point style?
(Bonus: Currently, I'm showing the second dataset near-correctly. I also want to completely fill the circle with the solid 'steelblue' color, not with transparency.)
(I would provide an image but I need at least 10 reputation to post them.)
<style>
.chart-container { width: 550px }
</style>
<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
type: 'line',
data: {
labels: ['(A)', '(B)', '(C)', '(D)'],
datasets: [
{
label: 'Patient Results',
data: [40, 230, 30, 60],
borderColor: 'steelblue',
borderWidth: 2,
pointBackgroundColor: 'steelblue',
fill: false,
spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
},
{
data: [0, 30, 20, 20], // representing the low range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#fff'
},
{
label: 'Low/High Range Limit',
data: [60, 150, 50, 40], // representing the high range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#c2e8f5'
}
]
},
options: {
elements: {
line: {
tension: 0 // disables bezier curves
}
},
legend: {
labels: {
boxWidth: 6,
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 1) {
return false;
}
return true;
},
usePointStyle: true
},
position: 'right',
reverse: true // shows 'Low/High Range Limit' first
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
I have create a simple XY Chart graph with percent as y axes and customers as x axes, I randomised the data between 0...100% with a set of 184 points. and have a bit of difficulty display the lower/upper region values. I have included an image for the demonstration.
Here my config file, I cant seem to find some sort of offset/padding ?
{
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineColorField: 'color',
}],
valueAxes: [
{
title,
borderThickness: 0,
axisThickness: 2,
maximum: 100,
labelFunction: (e,val) => { return val + "%"; },
},
{
title,
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
};
Thanks.
There isn't a way to pad this without modifying your minimum and maximum to be further outside your 0-100 range to accommodate. Since you're using a labelFunction, you can set it up so that you don't display any labels above and below 0-100% if you want, for example:
labelFunction: (e, val) => { return (val > 100 || val < 0 ? "" : val + "%"); }
Demo below using -10 as a minimum and 110 as a maximum:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
labelFunction: (e,val) => { return (val > 100 || val < 0 ? "" : val + "%"); },
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
If you want to remove the extra grid lines from the additional points generated by the new minimum and maximum, you'll have to use guides as your grid lines and labels instead of the ones auto-generated by the chart. For example:
valueAxes: [{
guides: [{
"value": 0,
"label": "0%",
"lineAlpha": .2,
"tickLength": 5
},
// repeat for each tick/grid line
],
"gridAlpha": 0,
"tickLength": 0,
"labelsEnabled": false,
// ...
Demo:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
guides: [{
value: 0,
label: "0%",
lineAlpha: .2,
tickLength: 5
},{
value: 20,
label: "20%",
lineAlpha: .2,
tickLength: 5
},{
value: 40,
label: "40%",
lineAlpha: .2,
tickLength: 5
},{
value: 60,
label: "60%",
lineAlpha: .2,
tickLength: 5
},{
value: 80,
label: "80%",
lineAlpha: .2,
tickLength: 5
},{
value: 100,
label: "100%",
lineAlpha: .2,
tickLength: 5
}],
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
I am trying to build a bar chart where 1st series represent the revenue and the next three represent different kind of expenses. So 1st series to be a single bar and the rest three series as stacked bar. Here is my code for the same.
var s0 = [15, 17, 19, 21];
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
var ticks = ['May', 'June', 'July', 'August'];
var plot3 = $.jqplot('chart1', [s0, s1, s2, s3], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
},
rendererOptions: {
fillToZero: true,
barMargin: 30,
barWidth: 50,
barPadding: 5,
barDirection: 'vertical'
},
},
series: [
{
disableStack: true,
label: 'Revenue'
},
{label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3'}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I have addded disableStack: true for the first series to exclude it from the stack but the chart still considers it as a part of the stack. Here is the output of my code.
Is there a way to fix this ? Thanks.
Yes. It is the order of the series you pass as argument that is not correct.
BEFORE the stacked series
AFTER the single bar series
and not viceversa...
So you have to move the first series as the last argument...
var plot3 = $.jqplot('chart', [s1, s2, s3, s0], {
and then you need to set the disableStack property on 'true' for the last series...
series: [
{label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3',label: 'Revenue', disableStack: true}
],
...and you need to adjust the margins, widts and padding of the columns
as you prefer...
The labels I use on axis for my graph contains text with more than one word. Like this:
and it looks bad. I tried (as you can see on the graph) to replace the wit spaces with brs or with \n in order to render the text in multiple lines. The result is not what I was expected to get.
How to split the ticks text into words and to draw each word on a row?
The <br/> is working will trying to split your text into two lines. See a working example here.
In order to make it work, don't forget to load some jqplot plugins : CanvasAxisTickRenderer, CategoryAxisRenderer.
You then need to apply tickRenderer: $.jqplot.CanvasAxisTickRenderer to your serie(s). You need as weel to apply renderer: $.jqplot.CategoryAxisRenderer onto your yaxis.
For me, <br/> didn't work and \n did.
My configuration:
jQuery.jqplot(element, configuration.series, {
stackSeries: true,
animate: false,
captureRightClick: false,
seriesColors: ['green', 'blue', 'yellow', 'orange', 'red'],
seriesDefaults: {
renderer: jQuery.jqplot.BarRenderer,
rendererOptions: {
shadowOffset: 0,
barDirection: 'horizontal',
highlightMouseDown: false,
barWidth: 20,
},
pointLabels: {
show: false
}
},
axesDefaults: {
min: 0,
minorTicks: 0,
tickOptions: {
formatString: '%d'
}
},
highlighter: {
show: false
},
axes: {
yaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer,
ticks: configuration.labels
},
xaxis: {
ticks: configuration.ticks,
label:'Hours',
labelOptions:{
fontFamily:'Helvetica',
fontSize: '10pt'
},
}
}
});