I have built an internal KPI that uses salesman's names as the legend key at the moment, however I need to use their custom icons as a key with their respective colour border.
I have tried editing the chart.js options: legend field per the documentation, to no avail (see current options and datasets config below.)
datasets: [
{
label: "Salesperson1",
data:totalPointsSalesperson1,
fill: false,
borderColor: 'blue',
},
{
label: "Salesperson2 ",
data:totalPointsSalesperson2,
fill: false,
borderColor: 'red',
},
{
label: "Salesperson3",
data:totalPointsSalesperson3,
fill: false,
borderColor: 'green',
},
{
label: "Salesperson4",
data:totalPointsSalesperson4,
fill: false,
borderColor: 'yellow',
}
],
},
options: {
legend:{
position: 'right',
display: true,
labels: {
padding: 150,
},
},
It seems that changing the point style on the chart is easy, but modifying the legend seems to be quite tricky. Perhaps im missing something blatantly obvious? One more thing to note as that this is a line graph.
Decided to fob off the Chart.js legend config and decided to write my own, i'll close this question down.
Related
I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful,
thank you
To add that vertical axis line, you can simply change to trigger: 'axis'. Beware that position: 'top' does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box).
I'd personally like the first option better. Good luck!
My React app uses react-chartjs-2 (which in turn uses the latest Chart.js 2.7.2). I'm trying to create stacked line charts with a differently styled section between the second-to-last and last x-axis labels, as shown in this example:
How can this be accomplished?
I solved it myself by separating the stacked line data into 2 datasets, to plot as separate stacked plots on the same figure/axes (by including the 2 separate datasets in a single chart's data object).
#Izzi (from comment) here is example:
Link with examle: https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html
Paste this config into editor on the website linked above:
data
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Data A',
data: [40.96,89.06,65.46,45.46,89.55,54.52,71.24,89.1],
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
// look at this setting
fill: 'origin'
},
{
label: 'Data B',
data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.CHART_COLORS.blue,
fill: 'origin'
},
{
label: 'Data C',
data: [20.96,65.06,15.46,34.46,53.55,24.52,31.24,59.1],
borderColor: Utils.CHART_COLORS.green,
backgroundColor: Utils.CHART_COLORS.green,
fill: 'origin'
}
]
};
config
const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
// look at this setting
stacked: true,
}
},
plugins: {
filler: {
propagate: false,
},
title: {
display: true,
text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
}
},
interaction: {
intersect: false,
}
},
};
I wanna know if it's possible to change the color of the chart axis using ChartJS.
Thanks
I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time.
But this changes the color of the axis and all the gridLines, what if
I just want to change the axis color? For example, I want the axis
line solid black and the grid lines grey.
If you're trying to achieve this, then the marked answer won't do it for you but the following should:
yAxes: [{
gridLines: {
zeroLineColor: '#ffcc33'
}
}]
you can change the color by scales configuration under chart options:
type: '...',
data: {...},
options: {
scales: {
xAxes: [{gridLines: { color: "#131c2b" }}],
yAxes: [{gridLines: { color: "#131c2b" }}]
}
}
Good question and good answer from #A Friend
His answer works perfectly well with ....... chart.js v2.xx
Here now for version 3.xx for those interested:
(as v3.xx is not backwards compatible with v2.xx)
Using borderColor instead of zeroLineColor to change the color of the chart axis using Chart.js v3.xx:
scales: {
x: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red' // <-- this line is answer to initial question
}
},
y: { // <-- axis is not array anymore, unlike before in v2.x: '[{'
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green' // <-- this line is answer to initial question
}
}
}
Following a working snippet with complete code:
const labels=["2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];
const ctx=document.querySelector('canvas').getContext('2d');
const data = {
labels: labels,
datasets: [{
label: 'Data 1',
borderColor: 'grey',
data: data_1
}, {
label: 'Data 2',
borderColor: 'grey',
data: data_2
}]
};
const options = {
scales: {
x: {
grid: {
color: 'rgba(255,0,0,0.1)',
borderColor: 'red'
}
},
y: {
grid: {
color: 'rgba(0,255,0,0.1)',
borderColor: 'green'
}
}
}
};
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->
<canvas width="320" height="240"></canvas>
In the Charjs.JS to style the scale label and ticks we can use below settings.
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'X axe name',
fontColor:'#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Y axe name',
fontColor: '#000000',
fontSize:10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}]
}
}
Please refer the link for all the properties. Study all the property before implementation.
Happy coding !
For ChartJs 3 updated in 2022
You can pass the options object when initializing the context. In the sample code I was use x to change the line color on X Axis, you can try y as well.
options: {
scales: {
x: {
grid: {
color: '#777777'
}
}
},
I not only want my legend to contain series' names, I also want it to contain name of my other items like my plotline. Here is my code:
plotLines: [
{
color: 'red',
dashStyle: 'shortdash',
value: response.AverageTime,
width: 2,
label: {
text: response.PlotLineName,
x: +10,
y: +30,
rotation: 360,
color: 'red'
}
}
]
So I want my plotline's name which is "Average Velocity Deviation" looks like in the legend box like below. How can I achieve that?
You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.
For example, you predefine these variables for ID and plot line options:
plotLineId = 'myPlotLine'; // To identify for removal
// Plot line options for adding
plotLineOptions = {
color: '#FF0000',
id: plotLineId,
width: 2,
value: 5.5,
dashStyle: 'shortdash'
};
Your axis plotline:
xAxis: {
plotLines: [ plotLineOptions ]
}
Your mimic series:
series: [
// ...
{
// Series that mimics the plot line
color: '#FF0000',
name: 'My plotline',
dashStyle: 'shortdash',
marker: {
enabled: false
},
events: {
// Event for showing/hiding plot line
legendItemClick: function(e) {
if(this.visible) {
this.chart.xAxis[0].removePlotLine(plotLineId);
}
else {
this.chart.xAxis[0].addPlotLine(plotLineOptions);
}
}
}
}
]
See this JSFiddle demonstration of how it works (or this minimal example, without events).
Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...
You can just use that series as your plotLine, and skip all of the extra work of tying everything together...
like:
{
name: 'Plot Line',
color: 'red',
type:'line',
dashStyle: 'shortdash',
lineWidth: 2,
data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/74/
I have a single series column graph with x-axis as datetime and y-axis as some constant value. I would like to show the columns in different colors based on some information I have , is this possible ?
e.g. I have dynamic data coming in to plot my graph,I use series.addPoint({x:x,y:value,extra:info}, false, false) to plot the same. Based on the info, how can I vary the colors?
I am pretty new to javascript and highcharts. So pardon my limited knowledge, any help in the right direction would be appreciated.
Updated code:
if(type=='a')
color='#7cb5ec';
else
if(type=='b')
color='#f45b5b';
else
if(type=='c')
color='#8085e9';
else
if(type=='d')
color='#2b908f';
else
color='#e4d354';
series.addPoint({x:x,y:value,extra:info,marker:{fillColor:color}}, false, false);
I have also set the colorByPoint: true option. The series.addPoint function runs in a loop which runs as and when I get my data.
Try out the following
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'
],
Fiddle link :)
Update 1:
Dynamic series fiddle:)
Update 2:
Use the following code to have specific color for specific bar
chart.series[0].addPoint({y: Math.random() * 100, color:'#659355'}, true, true);
You also can put colorByPoint: true in series option.
This way I do in my project, share for whom concern.
plotOptions: {
series: {
pointWidth: 30,
colorByPoint: true,
dataLabels: {
format: '{point.y:.0f}억원',
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -5,
y: 3,
style: {
fontSize: "16px",
color: '#fff',
fontWeight: '500',
}
}
}
},
colors: Array(3).fill().map(()=>`#${Math.floor(Math.random()*16777215).toString(16)}`)