I am trying to draw a line chart with bar chart. everything went well.
This is my code
$.plot(holder, [
{ data: data[0].data, lines: { show: true }, label:"Service Level" },
{ data: data[1].data, bars: { show: true }, yaxis: 2, label:"# Of Calls" } // set second series to use second axis
], {
yaxes: [{
min: 0, // options for first axis,
max: 100,
tickFormatter: function (val, axis) {
return val + '%';
}
}, {
alignTicksWithAxis: 1, // options for second axis, put it on right
position: "right"
}],
xaxis: {
min: minVal.getTime(),
max: maxVal.getTime(),
mode: "time",
timeformat: timeFormat,
//twelveHourClock: true,
tickSize: [tickVal, modeChart],
//monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0
},
bars: {
barWidth: 24 * 60 * 60,
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
});
}
I already set the barWidth and whatever I change the value, the width of the bar is not changing. could you help me please?
I am talking about the blue one in this image
Since your x-axis is time, the units are milliseconds. By specifying a bar width of 24*60*60 you're setting the width to be 1/1000th of a day, or about 1.5 minutes. For a chart that spans several months, 1.5 minutes is tiny and may not be what you want. If you want your bar widths to be a day, then you should specify a bar width of 24*60*60*1000 instead.
barWidth is a series option, you can specify it globally or per series:
Globally:
...
series: { // you are missing this
bars: {
barWidth: 24 * 60 * 60,
},
}
...
Per Series:
{ data: data[1].data, bars: { show: true, barWidth: 24 * 60 * 60 }, yaxis: 2, label:"# Of Calls" } // set second series to use second axis
Related
I have difficulty in changing the color of the bars in the bar chart to suit the theme of my website. I have gone to youtube and watched the following video https://www.youtube.com/watch?v=Cw87VN7K1Ek
and tried their solution to change color but was not successful. I would like to seek your help to know where I may have gone wrong or changes that have to be made to my code to successfully display the new color.
The following is the code snippet to configure the bar chart:
constructor() {
this.chartOptions = {
series: [
{
name: "My-series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: "bar"
},
title: {
text: "My First Angular Chart"
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
},
fill: {
colors: ['#f00']
}
};
}
The following is the result, the colors of the chart is still the default color from ApexCharts
I also would like to change the color of a specific bar (data point) within the bar chart when selected. I have looked through the following link: https://apexcharts.com/docs/options/states/, but this only changes the shade but I like to change the color but have not seem to find any resource to go about do it. I would sincerely appreciate if you have experienced the following before and has managed to change it successfully.
You can try this configuration:
var options = {
chart: {
type: 'bar',
height: 'auto'
},
series: [{
name: "My-series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
dataLabels: {
enabled: false
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
},
colors: [
function ({ value, seriesIndex, dataPointIndex, w }) {
if (dataPointIndex == 8) {
return "#7E36AF";
} else {
return "#D9534F";
}
}
]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I hope it was helpful!
Below is the pen for different color options. It shows single color and changes to multi color after a delay just to showcase available options. Pick the one you like.
https://codepen.io/raevilman/full/dyXNgNo
Chart options used in above link.
var options = {
chart: {
type: "bar"
},
series: [
{
data: [10, 40, 20, 44, 22, 12]
}
],
xaxis: {
categories: [1, 2, 3, 4, 5, 6]
},
colors: ["#00FF00"]
};
PS: I couldn't get the way to change selection color for bar chart.
How can I move my labels on my x axes in between another x axes label. Nothing seems to work and I was unable to find anything on the docs. Is there a workaround? I'm using line chart time series.
https://www.chartjs.org/samples/latest/scales/time/financial.html
Currently, with the code I have its generating the figure below:
var cfg = {
elements:{
point: {
radius: 4
}
},
data: {
datasets: [
{
label: 'vsy',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
data: firstData,
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
},
{
label: 'de vsy',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: dataMaker(15),
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
}
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
time: {
unit: 'month',
displayFormats: {
month: 'MMM'
}
},
ticks: {
autoSkip: true,
autoSkipPadding: 75,
sampleSize: 100
},
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
}
}
};
This is what I have now:
I want the labels on the x-axis to be on center instead of below the y axis grid line.
Thanks to uminder, with his comment it solves the issue but now I have a conflicting tooltip which lie on a same grid. When I hover to april line first point it shows me mar 30 which lies just above it and vice versa.
I fixed it by changing the mode to nearest but why is it activating the another point?
The option you're looking for is offsetGridLines.
If true, grid lines will be shifted to be between labels.
xAxes: [{
...
gridLines: {
offsetGridLines: true
}
In most cases, this produces the expected result. Unfortunately it doesn't work for time axes as documented in Chart.js issue #403. Thanks to Antti Hukkanen, there exists a workaround.
Please have a look at below runnable code snippet to see how it works.
function generateData() {
var unit = 'day';
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomPoint(date, lastClose) {
var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
return {
t: date.valueOf(),
y: close
};
}
var date = moment().subtract(1, 'years');
var now = moment();
var data = [];
for (; data.length < 600 && date.isBefore(now); date = date.clone().add(1, unit).startOf(unit)) {
data.push(randomPoint(date, data.length > 0 ? data[data.length - 1].y : 30));
}
return data;
}
var TimeCenterScale = Chart.scaleService.getScaleConstructor('time').extend({
getPixelForTick: function(index) {
var ticks = this.getTicks();
if (index < 0 || index >= ticks.length) {
return null;
}
// Get the pixel value for the current tick.
var px = this.getPixelForOffset(ticks[index].value);
// Get the next tick's pixel value.
var nextPx = this.right;
var nextTick = ticks[index + 1];
if (nextTick) {
nextPx = this.getPixelForOffset(nextTick.value);
}
// Align the labels in the middle of the current and next tick.
return px + (nextPx - px) / 2;
},
});
// Register the scale type
var defaults = Chart.scaleService.getScaleDefaults('time');
Chart.scaleService.registerScaleType('timecenter', TimeCenterScale, defaults);
var cfg = {
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
backgroundColor: 'red',
borderColor: 'red',
data: generateData(),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'timecenter',
time: {
unit: 'month',
stepSize: 1,
displayFormats: {
month: 'MMM'
}
},
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index'
}
}
};
var chart = new Chart('chart1', cfg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="90"></canvas>
For chartJs v3 you can use offset property:
scales: {
x: {
grid: {
offset: true
}
},
...
}
I am using Chartjs to display a time series line graph.
My setup is as following...
this.chartSetup = {
type: 'line',
data: {
labels: this.times,
datasets: [{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
label: title,
data: this.vals,
pointRadius: 0,
}]
},
options: {
spanGaps: true,
legend: {
position: 'bottom',
labels: {
boxWidth: 10
}
},
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
stepSize: 6,
unitStepSize: 5
},
type: 'time',
time: {
displayFormats: {
hour: 'h:mm a',
minute: 'h:mm a',
}
}
}],
},
}
};
Chart.defaults.global.animation.easing = "easeOutBounce";
this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);
My chart looks like the following screen shot
The data is Date for the X axis (Labels), and just numbers for the Y.
The time data goes from 6am to 6pm (12 hours worth)
I have a couple of issues here all relating to the X axis label formatting.
The initial 6am label is being cut off
How can I change the X axis label rotation (so perhaps by 90 degrees will fix the truncated first value)
My data goes to 6pm, but it is showing an extra X axis value (7pm). Can I get rid of this?
Thanks in advance for any suggestions here.
What worked for me was setting
autoskip: true
autoSkipPadding: 30
in the tick configuration.
1,2 - set minRotation = 90
3 - set Max value on your x axes
I am using flot jquery library to draw charts.
when my chart has a specific number of columns, I can set the x values for my points.
but now I have a dynmic data. so how can I know the points of the x axis please?
for example,
the x axis of the first point is 1325876000000
the x axis of the second point is 1328194400000
the third is 1330360000000
the fourth is 1332838400000
but lets say that I will have 9 columns. how can I know the x axis for them please?
I am printing the chart in this way
var holder = $('#vertical-chart');
if (holder.length) {
$.plot(holder, data, chartOptions);
}
the input data is like this
label: "label1"
data: [[1325876000000,0],[1325876000000,0],[1325876000000,0],[1325876000000,30]]
but now I don't know how many points in that array. it could be 11 or it could be 2
edit
this the chartoption
chartOptions = {
xaxis: {
min: (new Date(2011, 11, 15)).getTime(),
max: (new Date(2012, 04, 18)).getTime(),
mode: "time",
tickSize: [2, "month"],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: true,
lineWidth: 1,
order: true,
lineWidth: 0,
fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
},
colors: App.chartColors
}
When using $.plot(holder, data, chartOptions);, save the plot with a variable.
Declare var plot; globally,
and then call like this: plot = $.plot(holder, data, chartOptions);.
You can grab the data from the plot like this:
var datasets = [];
var xData = [];
datasets = plot.getData(); //this returns an array of all datasets
//goes through each series of data
for (var i = 0; i < datasets.length; i++){
//picks the series with label of "label 1"
if (datasets[i].label == "label 1"){
//copies x coordinates from the series into xData
for (var j = 0; j < datasets[i].data[j].length; j++){
xData.push(datasets[i].data[j][0]); //if you want y coords, use datasets[i].data[j][1]
}
}
}
I need to make a chart on which xAxis is of type 'datetime', but have irregular intervals:
http://jsfiddle.net/cz6rL/
this is the code:
$(function () {
$('#chart1').highcharts({
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Incomes/Outcomes'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
minRange: 15 * 24 * 3600000,
title: {
text: null
}
},
yAxis: {
title: {
text: 'Euro(€)'
}
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[9]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
//lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2014, 0, 01),
data: [["31/12/2013", 345.2], ["09/01/2014", 494.79999999999995], ["20/01/2014", 137.2], ["22/01/2014", 210.0],
["23/01/2014", 220.4], ["24/01/2014", 871.0], ["28/01/2014", 420.0], ["30/01/2014", 420.0], ["31/01/2014", 2057.15],
["05/02/2014", 191.2], ["06/02/2014", 81.6], ["07/02/2014", 295.2], ["11/02/2014", 135.12], ["12/02/2014", 189.2],
["13/02/2014", 210.0], ["14/02/2014", 315.2], ["17/02/2014", 462.79999999999995], ["18/02/2014", 544.4],
["19/02/2014", 715.4399999999999], ["20/02/2014", 971.2], ["21/02/2014", 418.0], ["02/02/2015", 366.0]]
}]
});
});
you can see that series values do not correspond to xAxis values. How can I fix it: having same days on xAxis or having months corresponding to series values days?
thanks
Luke
You can remove the pointStart assignment, highcharts will determine the range based on trhe values you provide it. Highcharts will take a look at the range of data you supply it and auto generate the tick marks based on your tickInterval settings, and the available dimensions of your chart. If you need the tick marks on the axis to be specifically the dates you have in you data, you should not used the datetime type axis.
Highcharts handles all date data value in unix/epoch time (number of seconds since 1/1/1970). If you want to use datetime axis, you must supply your data in that format.
Change all your date values such as
["31/12/2013", 345.2]
to
[Date.UTC(2013, 11, 31), 345.2]