-2

I want to create a chart like this:

enter image description here

The number of cells of the columns is not equal.

Display numbers in cells and have a border between the cells of the column.

Can edit the background color for any cell of the column.

Each column has many cells, but the number of colored annotations (to the right of the chart) may be less than the number of cells. For example, the number of cells is 5 but only the two colors are yellow and blue.

I tried using the google stacked column chart but did not do that, because the number of cells in each column is very large, but each column is only 2 -3 colors, I very much want to only note 2 -3 colors.

Tran Audi
  • 587
  • 1
  • 6
  • 22
  • Simple google search for "javascript stacked [bar] chart" returns lots and lots of results. Resource requests are off topic here – charlietfl May 29 '18 at 02:05
  • I have searched but the results do not meet the above conditions I have raised. – Tran Audi May 29 '18 at 02:32
  • I want the cells in the same column to be the same color, and if a column has 5 cells, I want to just note 2 cells representing 2 colors. – Tran Audi May 29 '18 at 02:33
  • Then choices would be compromise or create your own. Find it hard to believe out of all the various libraries around (and there are a lot of them) something doesn't have what you want. Most are highly customizable – charlietfl May 29 '18 at 02:33
  • I want the cells in the same column to be the same color, and if a column has 5 cells, I want to just note 2 cells representing 2 colors – Tran Audi May 29 '18 at 02:34

1 Answers1

1

Please Refer Below Fiddle. You can use Highchart Plugin for stack chart.

Fiddle

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});
Vishal
  • 178
  • 8