How can I make equalizer like histogram in highcharts as shown in this figure-
There is a similar solution to this here- https://www.highcharts.com/forum/viewtopic.php?t=38013 but it doesn't completely fits in my case.
In the solution, If I'm trying to create histogram by providing these options but then stacks are getting vanished.
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
shadow: false,
},
I think that your chart is closer to heatmap. You can use colsize and rowsize properties and null points to show the grey part of the columns.
series: [{
type: 'heatmap',
colsize: 0.9,
rowsize: 0.7,
data: [
[0, 0, 10],
[0, 1, 19],
[0, 2, null],
[0, 3, null],
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/dxw3jne2/
API Reference:
https://api.highcharts.com/highcharts/series.heatmap.colsize
https://api.highcharts.com/highcharts/series.heatmap.rowsize
Related
The data will always be integers between -10 and 10, including 0 so there could be a maximum of 21 'intervals' on the y axis.
Regardless of the data, I need the y axis to display from -10 to 10 (including 0) in increments of 1. So I need a total of 21 (ticks?) on the y axis regardless of the data.
I tried this, per the docs:
I also tried it without the steps param:
options: {
scales: {
y: {
max: -10,
min: 10,
ticks: {
steps: 21,
stepSize: 1
}
}
}
}
This is what I got:
The missing part in your code is autoSkip: false.
y: {
max: 10,
min: -10,
ticks: {
stepSize: 1,
autoSkip: false
}
}
According to the Chart.js documentation, autoskip is true by default.
autoskip: If true, automatically calculates how many labels can be shown and hides labels accordingly. (...) Turn autoSkip off to show all labels no matter what.
Please take a look at below runnable code and see how it works.
new Chart('canvas', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Dataset 1',
data: [3, 9, 7, 5, 9, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
fill: false
},
{
label: 'Dataset 2',
data: [1, 2, -3, -5, -2, 1],
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgb(255, 159, 64)'
}
]
},
options: {
scales: {
y: {
max: 10,
min: -10,
ticks: {
stepSize: 1,
autoSkip: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="canvas"></canvas>
Would it be possible in in echarts visualmap to define multiple pieces/intervals and for each interval to use a color linear map?
For a single segment/piece this would work:
visualMap = {min: -1, max: 1, inRange: {color: [startColor, endColor]},...}
This works ok.
Now if I want two pieces/segments:
visualMap = {pieces: [
{min: -1, max: 0, inRange: {color: [startColor1, endColor1]}},
{min: 0, max: 1, inRange: {color: [startColor2, endColor2]}}
], ...}
or
visualMap = {pieces: [
{min: -1, max: 0, color: [startColor1, endColor1]},
{min: 0, max: 1, color: [startColor2, endColor2]}
], ...}
I fail to obtain the linear mapping of the colors. I only get one static color for each defined piece/segment
How can I interpolate the text-offset of a marker depending on pitch?
Interpolation is perfectly working for:
'text-size': ['interpolate', ['linear'], ['zoom'], 10, 10, 18, 20],
but for text-offset it is not working.
'text-offset': ['interpolate', ['linear'], ['pitch'], 10, [0.2, 0], 18, [2, 0]],
What am I doing wrong?
'layout': {
'text-field': ['get', 'name'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-size': ['interpolate', ['linear'], ['zoom'], 10, 10, 18, 20],
'text-rotate': -90,
//'text-offset': [2, 0],
'text-offset': ['interpolate', ['linear'], ['pitch'], 10, [0.2, 0], 18, [2, 0]],
'text-anchor': 'left',
'text-allow-overlap': true
},
paint: {
"text-color": "rgba(0, 100, 50, 0.9)",
}
The only allowed camera expression is zoom, and so you need to set this text-offset value after each movement like below:
const map = new mapboxgl.Map({});
map.on('pitch', () => {
console.log('A pitch event occurred.');
map.setLayoutProperty(layerId, 'text-offset', newValue)
// More about setLayoutProperty https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setlayoutproperty
});
If you see performance issues, you may want to change map.on('pitch') to map.on('moveend') and compare map.getPitch() to previous pitch value to evaluate if you should change the text-offset value. More about each API below:
Map.getPitch
Map.event:moveend
Map.event:pitch
I am trying to build graph.
My y-axis start with 0 here, I dont know how to configure it and why it is talking 0 - I see other post which mentioned scaleOverride:true, scaleStartValue:0.1, scaleStepWidth:5 - I dont know how to use that in my below code , how can configure y-axis in chart.js.
Any pointer would be
I have following code
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(220,220,220,0.5)",
data: [6, 6, 6, 8, 6, 9, 8]
}]
};
function barChart() {
var context = document.getElementById('stacked').getContext('2d');
var myBar = new Chart(context, {
type: 'bar',
data: barChartData,
options: {
title:{
display:true,
text:"Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
$(document).ready(function() {
$(document).ready(barChart);
});
Thank you guys for helping, I observed that chart.js will automatically take value for y-axis based on your data, you can change y/x-axis setting under Options > Scales , I also needed to change step size of y-axis and get rid of x-axis grid line,"ticks" is something I was looking for, here is my sample code and steps to achieved all these.
Step 1) Canvas this is place holder where your chart will display on JSP
<canvas width="1393px;" height="500px;" id="stacked"></canvas>
Step 2) Create sample datasets (this is JSON you need to create based on your requirement but make sure you provide exact the same formated JSON response as given below along with your data.
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "red",
data: [9, 6, 6, 8, 6, 9, 8]
},
{
label: 'Dataset 1',
backgroundColor: "rgba(225,226,228,0.5)",
data: [9, 6, 6, 8, 6, 9, 8]
}]
};
or you can call JSON from controller inside script as below
var jsonArry = <%=request.getAttribute("jsonArry")%>;
Step 3) call that JSON which you have created at step 2
function barChart(){
var context = document.getElementById('stacked').getContext('2d');
var myBar = new Chart(context, {
type: 'bar',
data: jsonArry,
options: {
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
ticks:{
stepSize : 10,
},
stacked: true,
gridLines: {
lineWidth: 0,
color: "rgba(255,255,255,0)"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 1,
}
}]
}
}
});
};
Hope this will help , for reference I have used following documentation Chart JS
Thanks.
Just remove the stacked option and it will stop starting from 0 (unless your data starts from 0).
Related fiddle - http://jsfiddle.net/rsyk9he0/
For stacked charts, Chart.js builds a list of positive and negative sums for each stack (bar) and then uses that to figure out the scale min and max values. If there are no negative values, the list of negative sums is a list of 0s. This forces the scale min to be 0.
scaleStartValue, scaleStepWidth, etc. are options from v1.x of Chart.js. You are using v2.x. See How to make integer scale in Chartjs for the 2.x equivalents.
I'm trying to use Highcharts to create a graph similar to what's shown below. As clear, the 1st column (100%) is a sum of all others. The approach I thought of was to have invisible series below each of the individual categories to give them their raised look. The only thing that's holding me back is the thought of the situation where I might have to deal with say 30+ categories (possible in our application). Is there any simpler way to achieve the same results?
I can't post the image directly as I'm a new user. Sorry.
http://i.stack.imgur.com/RBWIf.png
I would suggest taking a look at the "low" property which is shown here:
http://fiddle.jshell.net/8JP8T/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
series: [{
data: [{
low: 1,
y: 2
}, {
low: 2,
y: 4
}, {
low: 0,
y: 4
}, {
low: 4,
y: 5
}]
}]
});
You'll still have to preprocess your data to get the correct y value and low value, but it seems doable?
For column chart, for each point you can specify the y value and the corresponding low to create a floating column.
series: [{
data: [
{y: 29.9, low: 20},
{y: 50, low: 20},
{y: 100, low: 50}
]
}]
See this example on jsfiddle.