Develop Reference

ChartJS - Line Chart - Tracking correlation between multiple datasets with large range in values

I need to create a Line chart, which works with multiple datasets, and with numbers that vastly differ from dataset to dataset
For example
// Tracks how much on average a customer has spend
const averagePurchaseValueDataset = {
label: 'Average Purchase Value',
dataset: [25.50, 28.50, 24.30, 26.40 ]
}
// Tracks on average how much the customer spends browsing the app
// tracked in seconds
const sessionDurationDataset = {
label: 'Session Duration',
dataset: [80, 120, 90, 85, 93]
}
// Tracks how many products the customer has purchased in one session
const averageItemsPurchased = {
label: 'Average Items Purchased',
dataset: [3, 2, 1, 1]
}
I need to create a single chart with 3 different lines on it, which are stacked on top of each other.
ChartJS does this by default when the datasets consist of similar values ( like 1-10 ), however, in my datasets, the ranges vary vastly - one dataset can have numbers between 1-10 and another one 5000-1000, but I still want them stacked on top of each other.
The goal of this chart is not to compare the literal values in each dataset, but their changes from one interval to the next.
For example these two datasets [10, 11] and [1000, 1100] should plot two lines which are stacked exactly on top of each other, because the difference is 10% in both cases

i think if you want to create a single chart with 3 different lines, you have to make the data in one dataset. sorry im not good in explaining things but you can checked code below.
const data = {
label: 'Multi Line',
dataset: [
{label: 'Average Purchase Value',
data: [25, 28, 24, 26]},
{label: 'Session Duration',
data: [80, 120, 90, 85]},
{label: 'Average Items Purchased',
data: [3, 2, 1, 1]},
]
}
hope it can help you

Ended up using the Multi-axis feature of ChartJS
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

Chart.js not displaying when passing dynamic labels

I am trying to draw a chart by passing values for labels and data dynamically using char.js.
The chart.js module refuses to accept the labels when passed as a variable.
When I hardcode it, it works just fine.
The label variable prints out the values on the page and seems to be correct in format.
Very similar to the problem described in the below query, except that I am already using a proper array.
[https://stackoverflow.com/questions/60453491/chart-js-not-showing-data-when-pass-dynamic-labels][1]
mypage.html:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4"></script>
{{Messages.vm_size_in_use_labels}}
{{Messages.vm_size_in_use_data}}
<canvas id="chart" width="50" height="50"></canvas>
<script lang="JavaScript">
let ctx = document.getElementById("chart").getContext("2d");
let chart = new Chart(ctx, {
type: "pie",
data: {
labels: {{Messages.vm_size_in_use_labels}},
datasets: [
{
label: "Gross volume ($)",
backgroundColor: "#79AEC8",
borderColor: "#417690",
data: {{Messages.vm_size_in_use_data}},
}
]
},
options: {
title: {
text: "Gross Volume in 2020",
display: true
}
}
});
</script>
The page shows the printed value correctly but chart doesn't display:
['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s']
[3, 3, 1, 1]
If I change the label to hard values,
labels: ['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'],
this works just fine and chart is displayed.
Not sure what is missing here. the framework is django if it matters.

Highcharts Treemap with multiple series: getting them all to show in legend

So I have 6 series I'm using in a single highcharts treemap chart where each series is it's own, smaller tree map. I can't get each of the names of the series to appear in the legend because the showInLegend property is a level above the data property.
I've tried two different configurations. First: series is set to my chartData variable, which looks like:
[{
name: key,
stack: key,
id: key,
showInLegend: true,
color: colors[key],
data: sliced
},
{...}]
And so forth. This gives me a single treemap chart with each series underneath the previous, aka they are stacked on top of each other.
If I combine them all into a single data array, I can get the proper chart format I'm looking for, where each individual series is grouped by color/parent and so forth. This was done using data-less data points, like so:
{
name,
id,
showInLegend,
color
}
and each of the other points then would be:
{
name
parent
value
}
This large data array is then given to a series array that looks like:
[{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: dataArray from above,
}]
Again, I want the chart to be multiple tree maps, not one jammed on top of the other. But i also need the legend to show all of those series' names

You can use unofficial legendType: 'point' property and remove unnecessary elements in afterGetAllItems legend event:
var H = Highcharts;
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(2, 6);
});
H.chart('container', {
series: [{
legendType: 'point',
showInLegend: true,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/gp2qmvac/
API Reference: https://api.highcharts.com/highcharts/series.treemap.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts

How to Draw a line on chart without a plot point using chart.js

I am using chart.js line chart. I can use the chart correctly but if I have only one plot point then the chart doesn't create a line from start to that point. I want to draw a line from the start of the chart to that single plot point without placing a plot point on that first day as we don't have data in the database for it.
Current chart behaviour:
Need a line like drawn here from the start of the chart:
Is this possible to draw a line on the chart from start to that point? Maybe some start point property or a hidden x-axis attribute on the chart to achieve this?
Also, any possible way to remove that space from top before that "Extreme" point on Y-Axis?
I have done hard research on it, have read the docs multiple times but unable to achieve them.

Have you tried Area charts with fill set to false? Check out the samples here https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html
It's kind of a hack but you can append the data with an extra point and update its styles to keep it hidden, Refer to our fiddle https://jsfiddle.net/hpdr5jf1/
Relative code
var options = {
type: 'line',
data: {
labels: ["", "Actual Data"],
datasets: [
{
label: 'Data Point',
data: [12, 12],
pointRadius: [0],
pointHitRadius: [0],
borderWidth: 1,
fill: false,
borderColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);

How correctly plotting an histogram with ZingChart?

I'm currently building an application in which I want to display histograms. Problem is that I can't manage to properly render an histogram with zingchart... I want ticks of the scale-x to be place on each side of data points, not centered on them as they represent the bounds of histogram bins.
Below is the python function that computes data to create the histogram using the histogram function on numpy package.
from numpy import histogram
def graph(self):
results = sorted(results, key=lambda x: mark)
marks = [result.mark for result in results]
maximum = 20
divisor = maximum
step = maximum / divisor
data, bin_edges = histogram(a=marks, range=(0, maximum), bins=divisor)
data = data.tolist()
return {'data': data, 'divisor': divisor, 'maximum': maximum, 'step': step}
Then this histogram data are used in the view to render the zing chart graph (This is a Jinja2 template as I use Flask-framework) :
<script>
var chartData = {
"type": "bar",
"plot": {
"aspect": "histogram",
},
"plotarea": {
"adjust-layout": true,
},
"series": [
{"values": {{ graph['data'] }}},
],
"scale-x": {
"progression": "lin",
"min-value": 0,
"max-value": {{ graph['maximum'] }},
"step": {{ graph['step'] }},
"decimals": 1,
},
};
zingchart.render({
"id": "graph1",
"data": chartData,
"width": "100%",
"height": "400px",
});
</script>

EDIT
To offset the scale-x number position, you just add the offsetX attribute to the scaleX.item. Here's an example...
scaleX: {
item: {
offsetX: 20
}
}
The default behavior of ZingChart histograms is to have the tick marks placed on each side of the data point. I placed some dummy data in your chart JSON and rendered it out. This is what it shows.
You can view the chart here: http://demos.zingchart.com/view/GQEQHWVV
Can you provide more insight into the problem you're trying to solve? There may be issues with the data you're passing. As far as I can tell, ZingChart renders histograms properly.
FYI: I'm on the ZingChart team