what kind of graph should be used for this use case

[shweta.jagtap]

Hi I want to represent the following kind of data using canvas.js – https://imgur.com/a/f5LNDsB
It is time series data – if the value of the variable on the x axis is 0 – I want a red bar, if it is 1 – I want a yellow bar, and if it is 2 – I want a green bar. All bars should be the same size/height.
There will be one data point per second. What kind of chart would be suitable for this use case? Also, is there a standard name for this kind of chart?

thanks,
warm regards,
Shweta Jagtap

[Shashi Ranjan]

Shweta,

You can use a column chart to achieve the above requirement. Also, by adding a custom option for each dataPoint you can set it’s color dynamically using the value associated with it as shown in this JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[saraf]

Thanks for helping out! Can you please tell us how to remove the spacing between the columns in the column chart?

Okay – found the answer – posting here for others that might wonder how to do this.

https://jsfiddle.net/uxs0wayd/

It looks like it may be done by setting the dataPointWidth https://canvasjs.com/docs/charts/chart-options/datapoint-width/. However, to calculate the dataPointWidth for achieving zero spacing between columns, we might need the total width of the chart, and then we can divide by the number of data points we have (number of columns).

Ok – I see – that can be done by getting the width of the div that contains the chart.

Thanks!