We Keep Coding

How to get the label value from bar chart in javascript?

So I've got a bar chart which has two different bars for supply and demand and I want it to tell me which one it is when I click on the bar. Because right now it just gives me the same index and x axis when I click on the bars. So how can I fix this problem? Here is my code :
var canvas = document.getElementById('myChart');
var data = {
labels: ["iOS", "Android", "React", "Angular", "SA", "BA", "Backbase"],
datasets: [
{
label: "supply",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
grouped: true,
pointHitRadius: 10,
data: [1, 2, 3, 4, 5, 6, 7],
},
{
label: "demand",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,29,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
grouped: true,
pointHitRadius: 10,
data: [5, 9, 8, 1, 6, 5, 4],
}
]
};
var option = {
showLines: true,
onClick: function(evt) {
console.log(myLineChart.getElementAtEvent(evt));
alert(data.datasets[0].data[myLineChart.getElementAtEvent(evt)[0]._index]);
alert(data.labels[myLineChart.getElementAtEvent(evt)[0]._index]);
}
};
var myLineChart = Chart.Bar(canvas,{
data:data,
options:option
});

Hey guys I figured it out here is the code :
alert(data.labels[myLineChart.getElementAtEvent(evt)[0]._index])
alert(data.datasets[myLineChart.getElementAtEvent(evt)[0]._datasetIndex].label)

What can I do to ensure that my charts diagram reload every time I choose it from my dropdown?

Hey guys I have built a dropdown menu that allows me to choose from different roles. Every time I choose a role my line chart loads. When I choose another option it loads again. However, when I choose the option that I have decided for again it does not load again. So it just loads once and then not anymore. Do you have an idea of how I can solve it?
const ctx = document.getElementById('jobChart').getContext('2d')
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
datasets: []
},
});
const jobDatasets = {
backend: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
lineTension: 0.3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
lineTension: 0.3,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
lineTension: 0.3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
lineTension: 0.3,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
frontend: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [40, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
mobile: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
full: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
devops: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
security: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
dataan: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
dataen: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
datasci: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "645bff",
borderColor: '#645bff',
fill: false,
pointRadius: 0,
borderWidth: 1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
}, {
label: "10th - 90th Percentile",
fill: false,
borderColor: "#645bff",
backgroundColor: "#645bff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
},
{
label: "Median",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#0d0e25",
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
},
{
label: "25th - 75th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#645bff",
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
},
{
label: "10th Percentile",
fill: false,
borderColor: "#c4c1ff",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
}
],
}
document.getElementById('job-role').addEventListener('change', function() {
chart.data.datasets = jobDatasets[this.value]
chart.update()
});
<select name="job-role" id="job-role" onchange="updateChartType()">
<option value="" disabled selected hidden>Select a Job Role</option>
<option value="backend">Backend Engineer</option>
<option value="frontend">Frontend Engineer</option>
<option value="mobile">Mobile Engineer</option>
<option value="full">Full-stack Engineer</option>
<option value="devops">DevOps & Infrastructure </option>
<option value="security">Security Engineer</option>
<option value="dataan">Data Analysis & BI</option>
<option value="dataen">Data Engineer</option>
<option value="datasci">Data Scientist</option>
</select>
<canvas id="jobChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>

update function is triggered by "change" event, (as you explicitly defined in addEventsListener parameters. Maybe consider adding
document.getElementById('job-role').addEventListener('click', function() {
chart.update()
});
to your code...

How can I animate my line charts as soon as I click on a specific tab?

I am looking for a solution to load my line chart as soon as I click on different tabs. In this case, I need to admit that I use Webflow as my platform and based on that I embed my code so even if you do not see any tabs in my code I can easily link it to my Webflow Tabs. Hope you can help me out to fit it into my almost finished product. Attached you find an image:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<div class="wrapper" id='front-end-engineer' style="height:600px;position: relative;margin-top:50px;">
<canvas id="mychart2" style="display: block; width: 958px; height: 478px;"></canvas>
</div>
<script>
var canvas2 = document.getElementById("mychart2");
var ctx2 = canvas2.getContext('2d');
const decimals2 = 0;
var config2 = {
type: 'line',
data: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'],
datasets: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
fill: 4,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3, //no fill here
data: [31, 32, 35, 42, 50, 50, 58, 60, 74]
}, {
label: "10th - 90th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#c4c1ff",
borderColor: '#c4c1ff',
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: 3,
//no fill here
data: [36, 45, 45, 55, 55, 59, 75, 85, 119]
}, {
label: "Median",
backgroundColor: '#0d0e25',
pointBackgroundColor: "#0d0e25",
borderColor: '#0d0e25',
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: false, //no fill here
data: [31, 38, 40, 45, 50, 55, 60, 75, 90]
},
{
label: "25th - 75th Percentile",
showInLegend: false,
backgroundColor: '#645bff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
fill: 0,
//fill until previous dataset
data: [34, 42, 45, 50, 54, 58, 66, 80, 110]
}, {
label: "10th Percentile",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
fill: '0',
data: [25, 30, 36, 39, 45, 49, 53, 56, 60, 68]
}
]
},
options: {responsive:true,maintainAspectRatio:false,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
if (label === "25th - 75th Percentile: ") {
label = "75th Percentile: "
}
if (label === "10th - 90th Percentile: ") {
label = "90th Percentile: "
}
label += tooltipItem.yLabel
return label;
}
}
},
title: {
display: true,
text: 'Backend Engineer salaries (1242 datapoints)',
fontSize: 20,position:'top'
},
maintainAspectRatio: false,
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
labels: {
filter: function(item,
mychart2) {
return item.datasetIndex !== 0 && item.datasetIndex !== 4;
}
}
},
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: { yAxes: [{
id: 'a',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}, {
id: 'b',
type: 'linear',
position: 'right',
ticks: {
display: false},
gridLines: {
lineWidth:0.5
},
scaleLabel: {
display: false
},
ticks: {
display: false,
beginAtZero: true,
stepSize: 20
}
}] ,xAxes: [{
gridLines: {
drawOnChartArea:false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}]
}
}
};
var chart2 = new Chart(ctx2, config2);
</script>

ChartJs. How to stretch up line graph to the edges?

I use ChartJs library for building graphs. For now my graphs have "side gaps". I want stretch line graphics to the full width and height like this:
I tried to change canvas width and it works if canvas has not a full width, but I need to make it works also on full width:
My configurations:
data: {
datasets: [
{
data: bids,
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
pointRadius: 0,
backgroundColor: 'rgba(58, 196, 174, 0.4)',
borderColor: '#3ac4ae',
lineTension: 0.7,
borderJoinStyle: 'miter',
},
{
data: asks,
pointRadius: 0,
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
backgroundColor: 'rgba(255, 107, 66, 0.4)',
borderColor: '#ff6b42',
lineTension: 0.7,
cubicInterpolationMode: 'default',
borderJoinStyle: 'miter',
}
]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [
{
display: true,
type: 'linear',
gridLines: {
borderDashOffset: 0,
display: true,
color: 'rgba(255, 255, 255, .1)'
},
ticks: {
autoSkip: false,
callback: (value, index, values) => {
console.log('valueskol', values)
return value
},
beginAtZero: true,
padding: 20,
},
}
],
yAxes: [
{
display: true,
type: 'linear',
position: 'left',
gridLines: {
display: true,
color: 'rgba(255, 255, 255, .1)',
drawBorder: false,
offsetGridLines: true,
tickMarkLength: 0,
drawOnChartArea: true
},
ticks: {
min: 0.02,
padding: 20,
stepSize: 0.1,
}
}
Would be very grateful, if someone can help me.

Set xAxes.ticks.min to the minimum X value and .max to the maximum value, and set yAxes.ticks.padding to 0.
Here's an example. I had to make up some numbers because the data is missing from your post:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [{
x: 1,
y: 12
}, {
x: 2,
y: 11
}, {
x: 3,
y: 10
}, {
x: 4,
y: 1
}, ],
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
pointRadius: 0,
backgroundColor: 'rgba(58, 196, 174, 0.4)',
borderColor: '#3ac4ae',
lineTension: 0.7,
borderJoinStyle: 'miter',
},
{
data: [{
x: 6,
y: 1
}, {
x: 7,
y: 3
}, {
x: 8,
y: 5
}, {
x: 9,
y: 11
}, ],
pointRadius: 0,
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
backgroundColor: 'rgba(255, 107, 66, 0.4)',
borderColor: '#ff6b42',
lineTension: 0.7,
cubicInterpolationMode: 'default',
borderJoinStyle: 'miter',
}
]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: 'linear',
gridLines: {
borderDashOffset: 0,
display: true,
color: 'rgba(255, 255, 255, .1)'
},
ticks: {
autoSkip: false,
callback: (value, index, values) => {
console.log('valueskol', values)
return value
},
beginAtZero: true,
padding: 20,
min: 1,
},
}],
yAxes: [{
display: true,
type: 'linear',
position: 'left',
gridLines: {
display: true,
color: 'rgba(255, 255, 255, .1)',
drawBorder: false,
offsetGridLines: true,
tickMarkLength: 0,
drawOnChartArea: true
},
ticks: {
padding: 0,
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Using the select tag in React and working with state to toggle between datasets with React Charts

I'm using React Charts. I have a line chart and I'd like to be able to switch between 2 sets of data.
Using the tag I made a dropdown. Take a look at a live example:
https://codesandbox.io/s/mm2vnz6869
Go to the dropdown and switch to "Revenue". Notice that it switches to the other set of data as desired. But now try to switch back to "Spend". Notice it does not work.
Why is that? Can someone take a look at my logic and let me know what I'm doing wrong? Thanks.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Line } from 'react-chartjs-2';
let lineData;
const lineDataSpend = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
};
const lineDataRev = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Revenue - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'red',
borderColor: 'red',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'red',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [27, 9, 37, 31, 102, 42, 19]
},
{
label: 'Revenue - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'yellow',
borderColor: 'yellow',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'yellow',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [1, 29, 4, 112, 26, 49, 81]
}
]
};
lineData = lineDataSpend; //init the graph data to 'Spend'
class App extends Component {
constructor(props) {
super(props);
this.changeMetric = this.changeMetric.bind(this);
this.state = {
selectedMetric: 'Spend'
};
}
changeMetric(event) {
this.setState({
selectedMetric: event.target.value
});
switch (event.target.value) {
case 'Spend':
lineData = lineDataSpend;
break;
case 'Revenue':
lineData = lineDataRev;
break;
default:
}
}
render() {
const lineOptions = {
title: {
display: true,
text: 'Account 1 vs Account 2'
},
tooltips: {
enabled: true,
callbacks: {
label: function (value, data) {
console.log('data', data)
const currentLabel = data.datasets[value.datasetIndex].label;
return currentLabel + ': ' + '$' + value.yLabel;
}
}
},
legend: {
display: true
},
maintainAspectRatio: true,
scales: {
yAxes: [{
ticks: {
callback: function (value) {
return '$' + parseFloat(value.toFixed(2));
}
},
stacked: false,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
return (
<div>
<select onChange={this.changeMetric} value={this.state.selectedMetric}>
<option value="Spend">Spend</option>
<option value="Revenue">Revenue</option>
</select>
<div className="row">
<div className="col-xl-10">
<div className="card">
<div className="card-header">
<i className="fa fa-align-justify" />
</div>
<div className="card-block">
<Line data={lineData} options={lineOptions} />
</div>
</div>
</div>
</div>
</div>
)
}
}
render(<App />, document.body);
In addition to this, Is there a way we could show both graphs at once by using checkbox's? For example, if there are two checkbox's spent, revenue and few other options.If we check spent shows spent data on the graph, if we check both boxes or more it shows all those graphs as such. Please help.

Your lineData initialisation to lineDataSpend is causing the issue. If you directly assign a default object to lineData instead of making it hold the object of lineDataSpend, your problem gets solved.
So, if you change line 103,
lineData = lineDataSpend; //init the graph data to 'Spend'
to
lineData = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
}
your problem will get solved. You can test the fix here - https://codesandbox.io/s/3rko469pkm
But even I am not clear as to why your initial assignment is causing problem because the assignment looks perfectly fine. Will have to dig deeper to know the reason behind this issue.