Related
I have a chart which effectively renders a timeline, but sometimes the tick positions are too close together
Current graph (padding: 25)
I can change the padding to be negative which puts them above the x-axis:
Ticks above x-axis (padding: -60)
But I'd prefer them to alternate to above and below eg 1st tick below, 2nd tick above, 3rd tick below etc.
Can I access the individual ticks padding to do this? See below my current code:
ticks: {
source: 'data',
maxRotation: 90,
minRotation: 90,
font: {
size: 12,
},
autoskip: true,
padding: -60,
},
TIA for any help! :-)
You can define two identical datasets together with two x-axes. One of the x-axes with position: 'top', the other one with default position ('bottom').
A slightly different ticks.callback function on both x-axes makes sure that only every second tick is displayed.
ticks: {
source: 'data',
...
callback: (v, i) => i % 2 ? v : ''
},
Please take a look at the following runnable code and see how it works.
const data = [
{ x: "2022-03-22", y: 0 },
{ x: "2022-04-01", y: 0 },
{ x: "2022-04-02", y: 0 },
{ x: "2022-04-03", y: 0 },
{ x: "2022-04-08", y: 0 },
{ x: "2022-04-12", y: 0 },
{ x: "2022-04-15", y: 0 }
];
new Chart('chart', {
type: 'line',
data: {
datasets: [{
data: data,
backgroundColor: 'black',
pointRadius: 5,
pointHoverRadius: 5,
borderWidth: 2,
xAxisID: 'x'
},
{
data: data,
backgroundColor: 'black',
pointRadius: 5,
pointHoverRadius: 5,
borderWidth: 2,
xAxisID: 'x2'
}]
},
options: {
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: context => undefined
}
}
},
scales: {
y: {
ticks: {
display: false,
},
grid: {
display: false,
drawBorder: false
}
},
x: {
position: 'top',
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
source: 'data',
minRotation: 90,
callback: (v, i) => i % 2 ? v : ''
},
grid: {
display:false,
drawBorder: false
}
},
x2: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
source: 'data',
minRotation: 90,
callback: (v, i) => i % 2 ? '' : v
},
grid: {
display:false,
drawBorder: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0"></script>
<canvas id="chart" height="50"></canvas>
I am testing out HighCharts and ChartJS to see which to use. For Highcharts, I was able to find a hack to create a bar chart that had double grouping on the x-axis.
This is what I want to look like:
I am new to both charting JS options and wonder if there is a way to do this in ChartJS.
I have the datasets something like this:
xAxis: {
categories: [{
name: "Total",
categories: ["2004", "2008", "2012"]
}, {
name: "Lower than 2.50",
categories: ["2004", "2008", "2012"]
}]
},
yAxis: {
min: 0,
title: {
text: 'Percent (%)'
}
},
series: [{
name: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4]
}, {
name: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6]
}]
Essentially I need a nest series on the x-axis and I am open to plugins or code from Github to do this.
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code, I use the afterDraw hook to draw the category labels and the delimiter lines.
new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
let xCenter = (xAxis.left + xAxis.right) / 2;
let yBottom = chart.scales['y-axis-0'].bottom;
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillText(chart.data.categories[0], (xAxis.left + xCenter) / 2, yBottom + 40);
ctx.fillText(chart.data.categories[1], (xCenter + xAxis.right) / 2, yBottom + 40);
ctx.strokeStyle = 'lightgray';
[xAxis.left, xCenter, xAxis.right].forEach(x => {
ctx.beginPath();
ctx.moveTo(x, yBottom);
ctx.lineTo(x, yBottom + 40);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
labels: ['2004', '2008', '2012', '2016', '2004', '2008', '2012', '2016'],
categories: ['Total', 'Lower than 2.50'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4, 51.2, 51.8],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6, 53.7, 54.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
padding: 30,
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
You have to define a second x-axis and play around with the many ticks and gridLines options.
Please take a look at below runnable code and see how it could be done. This is obviously only a draft and needs to optimized and made more generic.
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2004', '2008', '2012', '2004', '2008', '2012'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
},
{
offset: true,
ticks: {
autoSkip: false,
maxRotation: 0,
padding: -15,
callback: (v, i) => {
if (i == 1) {
return 'Total';
} else if (i == 4) {
return 'Lower than 2.50';
} else {
return '';
}
}
},
gridLines: {
drawOnChartArea: false,
offsetGridLines: true,
tickMarkLength: 20,
color: ['white', 'white', 'white', 'lightgray', 'white', 'white', 'lightgray']
}
}
]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
Can someone explain to me how to toggle from light to dark theme without reloading the page??
I have this code that checks if the theme is light or dark and I want to change the theme dynamically base on the theme.
my code so far
initECharts(days: any, hours: any, data: any) {
if (this._chart) {
this._chart.clear();
this._chart = null;
}
// console.log('days: ', this.days);
// console.log('hours: ', this.hours);
// console.log('values: ', this.values);
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
Ok, I found it.
every time you want to update the theme dynamically example a button or an observable or Promise, you must call this method
echarts.dispose(this._chart);
then you call the initMethod, example:
this.initECharts();
The init method can look like this in my case.
initECharts(days: any, hours: any, data: any) {
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
I'm using HighCharts to display charts on my site.
What I'd like to achieve is just a line chart with (zoomable) Date-Time X-Axis and numbers in Y-Axis.
But the result is messed up:
I load data by an ajax call, create an array and use chart.series[0].setData(chartData); to set the chart's data. Below is a sample for chartData:
[[1343071800000, 17], [1343158200000, 171], [1343244600000, 291], [1343075400000, 18],
[1343161800000, 74], [1343248200000, 293], [1343165400000, 183], [1343251800000, 296]]
Also, I use DotNetHighCharts since I'm using ASP.NET MVC 3, but the generated javascript to create the chart is as follows:
chart = new Highcharts.Chart({
chart: { renderTo:'chart_container' },
legend: { align: 'left', borderWidth: 0, floating: true, layout: 'horizontal', verticalAlign: 'top', y: 20 },
plotOptions: { series: { cursor: 'pointer', marker: { lineWidth: 1 }, point: { events: { click: function() { alert(Highcharts.dateFormat('%A, %b %e, %Y', this.x) +': '+ this.y +' visits'); } } } } },
subtitle: { text: 'Source: Google Analytics' },
title: { text: 'Daily visits at www.highcharts.com' },
tooltip: { crosshairs: true, shared: true },
xAxis: { gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }, tickInterval: 604800000, tickWidth: 0, type: 'datetime' },
yAxis: [{ labels: { align: 'left', x: 3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: false, title: { text: '' } }, { gridLineWidth: 0, labels: { align: 'right', x: -3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, linkedTo: 0, opposite: true, showFirstLabel: false, title: { text: '' } }],
series: [{ name: 'All visits' }]
Your dataset is not in chronological order. So the charting system is joining all the points as best it can.
For time-based series it is always best to sort your time from earliest to latest.
I'm trying to get a x-axis with dates on it. The x data is a timestamp. Somehow I can't get it right.
The line has values like:
line = [[1334856823000, 2], [1334856853000, 1], [1334856883000, 0], [1334856913000,4],[1334856914000, 13], [1334856943000, 16], [1334856973000, 23], [1334857003000, 24], [1334857033000, 36], [1334857063000, 14], [1334857093000, 1]]
$.jqplot('container', [line],
{ title: "Snelheidsgrafiek",
axes: {
xaxis: {
rederer: $.jqplot.DateAxisRenderer,
rendererOptions: {tickRenderer: $.jqplot.canvasAxisTickRenderer},
tickOptions: {formatString: '%H:%M'}
},
yaxis: {
min: 0
}
}
});
Now it displays just %H:%M as the label.
I tried many variations, but can't get it going.
Here it goes.
Your problem is that the tickRenderer: $.jqplot.CanvasAxisTickRenderer should be on the same level as renderer, and not inside rendererOptions.
Please see the jsfiddle.
EDIT
Also you are missing an import of CanvasTextRenderer which the CanvasAxisTickRenderer uses and you forget to start with a capital letter C, like so: $.jqplot.CanvasAxisTickRenderer.
give this a try. this is copied in a hurry out of a working code. I stripped out a lot to give you a better overview. Maybe it is missing a bracket here and there but it should give you an idea of what to set up and how the affected variables. This works 100% for sure.
Make sure to include the needed Javascript libraries aswell.
If you need more details, let me know...
<script type="text/javascript">(function($) {
var indizes;
var plot1;
$(document).ready(function() {
$(function() {
$(document).ready(function() {
indizes = [["2011-12-31",0.00],["2012-01-31",6.25],["2012-02-28",12.56],["2012-03-31",17.62],["2012-04-30",18.72],["2012-05-31",12.44],["2012-06-30",15.14],["2012-07-31",20.27],["2012-08-31",20.82],["2012-09-30",24.47],["2012-10-31",25.68],["2012-11-30",26.41],["2012-12-31",28.43],["2013-01-31",32.76],["2013-02-28",36.82],["2013-03-31",42.29],["2013-04-30",43.14],["2013-05-31",45.87],["2013-06-30",40.68],["2013-07-31",50.58],["2013-08-31",46.00],["2013-09-29",56.20],["2013-10-02",55.40]]; ;
draw_first();
function draw_first() {
plot1 = $.jqplot("chartdiv", [indizes], {
seriesColors: ["rgba(0, 189, 255, 1)"],
title: '',
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#333',
gridLineWidth: 1
},
legend: {
show: true,
placement: 'inside',
location: 'nw'
},
seriesDefaults: {
rendererOptions: {
smooth: false,
animation: {
show: true
}
},
showMarker: true,
pointLabels: {show: pointlabels},
markerOptions: {
style: 'filledSquare'
}
},
series: [
{
label: 'Indizes'
}
],
axesDefaults: {
rendererOptions: {
baselineWidth: 2,
baselineColor: '#444444',
drawBaseline: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: "%b",
angle: 0,
textColor: '#888'
},
min: "2012-10-01",
max: "2013-10-31",
tickInterval: "1 month",
drawMajorGridlines: true
},
yaxis: {
renderer: $.jqplot.LinearAxisRenderer,
pad: 0,
rendererOptions: {
minorTicks: 1
},
drawMajorGridlines: false,
tickOptions: {
formatString: function() {
return '%#.1f %';
}(),
showMark: false,
textColor: '#888'
}
}
}
});
}
})(jQuery);</script>