Develop Reference

Charts.js - How to create a custom X axis

I'm trying to create a mix chart, a bar chart with a line chart. Below is a picture of a standard example.
I need to change the x-axis as shown in the picture below, how can I do that?
In other words, I want to remove the dependence of x-axis labels on the number of bars and their points and make the x-axis arbitrary, which sets the maximum and minimum values and its step

Change the labels as shown in this example:
const data = {
// Put whatever you want
labels: [0, 5, 10, 15, 20],
datasets: [
{
/* ........ */
},
]
};

I found a solution, we need to add a new dataset and bind it to a custom X axis.
datasets: [{
type: chartTypes.Line,
xAxisID: 'custom-X-axis',
},
/*...*/]
Then we need to add this custom axis and hide the default one
scales: {
xAxes: [
{
display: false,
}, {
id: 'custom-X-axis',
type: 'linear',
ticks: {
min: 0,
max: 20,
}
}
],
}

Stacked bar chart with chartjs with included values

I am trying to create a visitors bar chart with included values, for example:
I want to show a bar chart of total daily visitors, and that bar should contain info of total visitors and first time visitors.
so data for a bar should look like:
data: {
labels: getDataAttributes(data, 'data-date'),
// an array holding the date of each bar (custom function)
// for example purposes lets say its just 3 bars
datasets: [{
label: ['Number of visitors', 'Number of new visitors'],
data: [[20,15], [25,10], [30, 15]],
// Here if we would use a simple stacked bar chart the height would be the sum of 2 values
// e.g.(20+15=35), but I wish that the bar height would be the number of total visitors 20
// the tooltip should contain values of total visitors and new visitors respectively 20 and 15
}]
}
I looked in the chartjs documentation, but found only examples with stacked values and that solution is not applied in my desired design, can someone please reference documentation/articles/tutorials or personal experience or perhaps I should switch to d3js? Thanks.

You could define two datasets, the first one would contain the values of new visitors, the second one the values of all visitors.
Then you would define the x-axis as being stacked:
options: {
scales: {
xAxes: [{
stacked: true
}],
Please take a look at below runnable code snippet to see how it works:
const baseData = [[20,15], [25,10], [30, 15]];
new Chart('chart', {
type: 'bar',
data: {
labels: ['25.10.2020', '26.10.2020', '27.10.2020'],
datasets: [{
label: 'Number of new visitors',
data: baseData.map(v => v[1]),
backgroundColor: 'green'
},
{
label: 'Number of visitors',
data: baseData.map(v => v[0]),
backgroundColor: 'blue'
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>

How do I display all the data in categories on y-axis in HighCharts?

I would like to display on the y-axis of the data through the categories property. I pass an array as I saw in some examples
initLapChart() {
hcharts.chart(this.div.nativeElement, {
chart: {
...
},
yAxis: {
categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
reversed: true,
tickPixelInterval: 50,
gridLineWidth: 1,
...
},
...
}
but it only shows me the first two values, why?

If you want to show all of your categories, whether you have data for them or not, you just need to set your axis min and max values:
yAxis: {
min: 0,
max: 4,
reversed: true,
tickInterval: 1,
categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
labels: {
step: 1
}
},
Updated fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/1/
Or you can do it programmatically if you define your categories up front:
var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'],
yMax = categories.length -1;
Fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/2/

The elements in categories array are indexed from 0 to categories.length - 1, so the first element from the array represents value 0 on yAxis, the second, value 1, etc. If you want to display them all, you need to set tickInterval and labels.step properties with value 1.
API Reference:
http://api.highcharts.com/highcharts/yAxis.tickInterval
http://api.highcharts.com/highcharts/yAxis.labels.step
Example:
http://jsfiddle.net/6qp0v887/

Handle X-axis label position in chart js

Please look into this fiddle
If you resize the output window you will notice that the labels of x-axis becomes slanted. which is fine for me. But if you notice that the end position of label is center of bar. I want the end position of label to be the right-side end of bar. How can achieve this?
My config is
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
datasets: [{
data: [6, 87, 56, 15, 88, 60, 12],
}]
},
options: {
legend: {
"display": false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
gridLines: {
display : false
},
ticks: {
display: false,
beginAtZero:true
}
}],
xAxes: [{
gridLines: {
display : false
},
ticks: {
beginAtZero:true
}
}]
}
}
});

It is certainly possible to achieve a 'right' aligned scale tick label instead of the original 'center' aligned scale tick label, but unfortunately it is not very straight forward to implement. Let me walk you through how to do it and then provide an example.
1) First, since there is no configuration option to control this, we have to look at doing some sort of custom implementation. It turns out that the scale tick labels in a bar chart are rendered as part of the Category scale's draw method. Therefore, we must somehow overwrite this draw method to change to a new alignment.
2) According to the API there is a documented way to create new scale types, so we should be able to use a similar approach to extend the Category scale type and overwrite it's draw method.
Since all scales are wrapped up in the ScaleService we have to use the below approach to extend an existing scale type.
var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({});
3) Now its just a matter of figuring out what part of the draw method we need to modify. After looking it over, it looks like we need to change the logic for calculating labelX (the pixel position to render the tick label). Here would be the new logic.
// current logic for getting pixel value of each label (we will use the logic below to
// adjust if necessary)
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;
// get a reference to the bar chart controller so we can determine the chart's bar width
var meta = me.chart.getDatasetMeta(0);
// use the bart chart controller to calculate the bar width
var barWidth = meta.controller.calculateBarWidth(meta.controller.getRuler());
// if the labels are rotated, then move the pixel location from the middle of the bar
// to the far right of the bar
if (labelRotationRadians != 0) {
labelX += barWidth / 2;
}
4) Now we just need to register our new scale and configure the chart to use it (instead of the bar chart default category scale).
Chart.scaleService.registerScaleType('categoryRightAligned', CategoryRightAligned, {position: 'bottom'});
xAxes: [{
type: 'categoryRightAligned',
gridLines: {
display : false,
offsetGridLines: true
},
ticks: {
beginAtZero:true,
}
}]
Refer to this jsfiddle example to see it in action and to see how everything fits together.

Highcharts Speedometer, dataLabel for mileage counter

There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]

If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.