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
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>
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
I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur
I am looking for a way to manually specify x/y ticks locations on a chart.js chart, an equivalent of matplotlib's matplotlib.pyplot.xticks. The documentation explains how to create custom tick formats, but this works on automatically calculated tick locations. How can I specify the ticks locations?
This is the config that I am using:
var config = {
type: "line",
data: {
labels: [],
datasets: [{
data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
fill: false,
borderColor: "#1f77b4",
}],
},
options: {
scales: {
xAxes: [{
type: 'linear',
distribution: 'series',
ticks: {
min: 0.,
max: 7.,
},
}]
},
},
}
which produces this file:
I would like to specify xticks locations, e.g. [0., 3.5, 5.7, 6.1], so that the plot would look more like (not taking into account grid lines and smooth plot line):
Apparently with Chart.js v3, the accpted solution no longer works as expected. Trying afterBuildTicks as suggested by b1000 in his comment, it also didn't work.
To make it work with afterBuildTicks, you need to map the number values into objects that have the property value each ([{ value: 0 }, { value: 3.5 }, ... ]). This can be done as follows:
afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v }))
Please take a look at below runnable sample:
new Chart('line-chart', {
type: 'scatter',
data: {
datasets: [{
data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
showLine : true,
borderColor: '#1f77b4',
}]
},
options: {
scales: {
x: {
min: 0,
afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v }))
}
}
}
});
canvas {
max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="line-chart"></canvas>
For not drawing grid lines on the chart, you need to add the following to your axes as described at Grid Line Configuration.
gridLines: {
drawOnChartArea: false
}
In order to obtain the ticks at the desired position only, you would define xAxis.ticks as shown below and documented at Tick Option and Creating Custom Tick Formats.
ticks: {
...
stepSize: 0.1,
autoSkip: false,
callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
maxRotation: 0
},
Finally, to obtain a straight line between the data points, define lineTension: 0 on your dataset as explained at Line Styling.
Please have a look at your amended code below.
var config = {
type: "line",
data: {
labels: [],
datasets: [{
data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
fill: false,
lineTension: 0,
borderColor: "#1f77b4",
}],
},
options: {
scales: {
xAxes: [{
type: 'linear',
ticks: {
min: 0.,
max: 7.,
stepSize: 0.1,
autoSkip: false,
callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
maxRotation: 0
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
ticks: {
showLabelBackdrop: true
},
gridLines: {
drawOnChartArea: false
}
}]
},
},
};
new Chart('line-chart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>
I made a google line chart using the following options.
var options = {
pointSize: 10,
pointShape: 'circle',
backgroundColor: '#FFFFFF',
legend: {position: 'none'},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {min: 0},
gridlines: {color: '#CCCCCC'},
textStyle: {color: '#444444'}
},
hAxis: {
viewWindowMode: 'explicit',
viewWindow: {min: 0},
textStyle: {color: '#444444'}
},
chartArea: {left: 40, top: 10, width: 900, height: 150},
colors: ['#FF9900', '#2A96FF', '#424242'],
animation: {duration: 1000, easing: 'out'},
smoothLine: true,
tooltip: {isHtml: true}
};
This line chart was generated using the above options.
When the values are changes the number of x axes is always 5. How can i set this to be dynamic so that there will be no decimal labels/values in the y axis.
For the above example i need only 0 and 1. 0.25, 0.50 and 0.75 are not needed.
you can provide your own tick marks for either axis...
vAxis: {
ticks: [0, 1],
...